我正在使用galaxy s4,android 4.2.2上的chrome移动浏览器,出于某种原因,每当我向下滚动页面时,它都会触发一个通过jquery.cycle2幻灯片放映图像验证的resize事件.
知道为什么会这样吗？
我正在开发我的网站的移动版本.我尽可能地使用媒体查询和CSS,但我也使用一些javascript,例如,将我的导航转换为较小设备上的折叠/展开列表以节省空间.
为了处理所有这些,我试图使用window.resize事件.这样可以在桌面浏览器调整大小时实现魔力,但是当我不期待它们时,我会在iPad/iPhone上调整大小.
在桌面浏览器上,如果我实际调整窗口大小,我只会收到调整大小事件.在移动浏览器上,当我更改方向(预期)时,我会收到调整大小事件,但是当我切换到展开/折叠某些内容时,我也会得到它.
这是一个简单的例子:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Resize test</title>
<style>
.box {height: 10000px; background: green; display: none;}
</style>
<script>
$(function(){
$(".opener").click(function(){
$(".box").slideToggle();
});
$(window).resize(function(){
alert("resized");
});
});
</script>
</head>
<body>
<a href="#" class="opener">Open/close me</a>
<div class="box"></div>
</body>
</html>
单击桌面浏览器上的链接时,不会发出警报.点击iPhone/iPad上的链接,即可获得提醒.这是怎么回事？
我正在写一个针对iPhone的网站.<body>当iPhone的方向改变时(即当用户将手机转为横向和/或纵向模式时),我想在元素上设置一个类.
我可以通过JavaScript检测到此更改吗？有这样的事件吗？
我有一个需要在调整浏览器窗口大小时调整大小的画布,所以我有以下内容:
var resizeCanvas = function () {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = (canvas.offsetWidth || canvas.width) * ratio;
canvas.height = (canvas.offsetHeight || canvas.height) * ratio;
canvas.getContext('2d').scale(ratio, ratio);
}
window.addEventListener('resize', resizeCanvas);
这很有效,除了在移动设备上滚动触发resize事件.
这是不希望的,因为调整画布大小会清除其内容,这意味着当移动用户滚动时,画布总是被擦除.
由于这个答案,我提出了一个基于缓存宽度和双重检查的解决方案,但根据我的设计,我真的只需要解决受我的视口metatag影响的设备的问题:
<meta name="viewport" content="width=device-width, initial-scale=1">
有没有我可以检查浏览器是否正在使用该元标记？我正在寻找类似的东西:
if(viewportMetaTagIsUsed){
//For mobile browsers
window.addEventListener("orientationchange", resizeCanvas);
} else {
//For desktop browsers
window.addEventListener('resize', resizeCanvas);
}
这是我的代码，它在浏览器上很好用，但在移动设备上却不能用，不是jQuery的专家，所以如果有任何错误，请原谅我。
var width = $(window).width(), height = $(window).height();
$(window).on('resize', function() {
if($(window).width() != width && $(window).height() != height)
{
var width = $(window).width(), height = $(window).height();
//do something here;
}
});