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将是窗口。 如果用户调整#someDivtarget将是#someDiv

 $(window).on('resize', function(event) { if ($(event.target).is($(window))) { doTheThing(); } });