iPhone / iPad触发意外的resize的事件
我正在使用我的网站的移动版本。 我尽可能地使用媒体查询和CSS，但我也使用一些JavaScript，例如，将我的导航到一个较小的设备上的崩溃/展开列表，以节省空间。
为了处理所有这些，我试图使用window.resize事件。 这可以让桌面浏览器在resize时发生魔法，但是当我不期待它们时，我正在iPad / iPhone上resize事件。
在桌面浏览器上，如果实际调整窗口大小，我只会得到一个resize事件。 在移动浏览器中，当我改变方向（预期）时，我得到了resize事件，但是当我切换到展开/折叠的东西时，我也得到了它。
这是一个简单的例子：
<!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 }); });
假设是错误的，你只是想在非触摸设备上产生resize事件的效果？ 如果是这样，你可以使用Modernizr并做一个检查，如：
$(window).resize(function(e){ if(Modernizr.touch) { e.preventDefault(); } });
我需要指定一个宽度：
<meta name="viewport" content="width=1000, initial-scale=1.0, user-scalable=yes">
样式：
html, body { height:100%; width:100%; overflow:auto; }
检查是否显式滚动html正文包装器，以加载页面时隐藏地址栏。
@ 3条纹有正确的答案。
这只是一个微小的修改，通过caching窗口对象而不是反复实例化jQuery（请记住resize事件可能会在实际resize时被快速调用），从而使效率更高。
jQuery(document).ready(function($) { // Cached window jQuery object var $window = $(window); // 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 }); });
我发现了解决scheme的自我链接在stackoverflow中的答案。 这是sidonaldson的答案，帮助我解决了这样的问题。 TY
答案是：
var cachedWidth = $(window).width(); $(window).resize(function(){ var newWidth = $(window).width(); if(newWidth !== cachedWidth){ //DO RESIZE HERE cachedWidth = newWidth; } });
检查窗口大小，看看它是否改变，感觉很不好意思。 相反，使用jQuery为您提供的资源！
在事件处理程序中，您可以检查jQuery事件的target字段，该字段始终设置为发起事件的DOM元素。 如果用户调整窗口大小， target将是窗口。 如果用户调整#someDiv ， target将是#someDiv 。
$(window).on('resize', function(event) { if ($(event.target).is($(window))) { doTheThing(); } });
