我正在开发我的网站的移动版本。我尽可能多地使用媒体查询和 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 上单击该链接，您会收到警报。这是怎么回事？
存储窗口宽度并检查它是否确实发生了变化，然后再继续您的操作$(window).resize功能：
jQuery(document).ready(function($) {
// Store the window width
var windowWidth = $(window).width();
// Resize Event
$(window).resize(function(){
// Check window width has actually changed and it's not just iOS triggering a resize event on scroll
if ($(window).width() != windowWidth) {
// Update the window width for next time
windowWidth = $(window).width();
// Do stuff here
}
// Otherwise do nothing
});
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
