iphone/ipad觸發意外調整大小事件

我正在使用我的網站的移動版本。我儘可能多地使用媒體查詢和CSS，但我也使用了一些JavaScript，例如，將我的導航轉變爲較小設備上的摺疊/展開列表以節省空間。iphone/ipad觸發意外調整大小事件

爲了處理所有這些，我試圖使用window.resize事件。這可以讓桌面瀏覽器在調整大小時發生魔法，但是當我不期待它們時，我正在iPad/iPhone上獲取調整大小的事件。

在桌面瀏覽器上，如果實際調整窗口大小，我只會得到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上的鏈接，您會收到警報。這是怎麼回事？

來源

2012-01-17 rdoyle720

Hi @ rdoyle720。爲什麼不標記@ 3stripe答案的有效答案？ – 2016-01-15 12:47:46

@ rdoyle720我也想這樣:) – 3stripe 2016-11-15 09:42:24

商店窗口寬度並檢查它實際上有沒有改變你的$(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 

    }); 

});

來源

2014-06-13 19:05:56 3stripe

謝謝。在這個問題上我自己花了太長時間。很簡單的解決方案 – am80l 2015-01-30 06:55:23

我喜歡這個解決方案。 F * ck給iOS，使滾動觸發'resize'事件。不知所云。 – 2015-12-14 12:46:09

這個解決方案再次拯救了我的生活。我不明白爲什麼這個答案沒有被標記爲有效的答案，但這個答案是領土有近1000個upvotes（有一些愚蠢的東西，有更多的upvotes）。 – 2016-01-15 12:46:49

我需要指定一個寬度：

<meta name="viewport" content="width=1000, initial-scale=1.0, user-scalable=yes">

樣式：

html, body 
{ 
     height:100%; 
     width:100%; 
     overflow:auto; 
}

來源

2012-01-17 16:53:57

謝謝，但後來我失去了設計的響應部分，讓它適應不同的分辨率... – rdoyle720 2012-01-17 16:57:26

好點。如果body和html都是，你甚至會得到事件：height：100％;用：100％;溢出：自動？ – 2012-01-17 17:00:08

這樣做，加入： html，body {height：100％;溢出：自動;保證金：0} 停止調整大小事件。 – rdoyle720 2012-01-17 17:39:24

檢查您明確地滾動HTML體包裝隱藏地址欄的頁面加載時。

來源

2012-01-27 10:29:52 Abhidev

假設是否錯誤，您只希望在非觸控設備上產生resize事件的效果？如果是這樣，你可以只使用Modernizr的，做一個檢查，如：

$(window).resize(function(e){ 
     if(Modernizr.touch) { 
     e.preventDefault(); 
     } 
    });

來源

2012-02-04 10:45:18 Felix

一些現代的筆記本電腦也有觸摸屏... – yckart 2013-07-13 22:05:21

不幸的是，Modernizr無法再檢測到觸摸，也不應該。 http://www.stucox.com/blog/you-cant-detect-a-touchscreen/ – Alex 2016-07-05 16:03:02

@ 3stripe具有正確的回答。

這只是一個微小的修改，通過緩存窗口對象而不是反覆實例化jQuery（請記住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 

    }); 

});

來源

2016-07-09 23:22:43 anthonygore

是的，這是更好的，但不應該是「var $ window = $（window）;」（你錯過了var聲明） – Ralphonz 2016-09-06 09:52:57

謝謝@Ralphonz，已更新 – anthonygore 2016-09-06 10:22:59

我找到了答案在stackoverflow它自我link of the solution。它的答案是sidonaldson這幫助我解決了這樣一個問題。 TY

的答案是：

var cachedWidth = $(window).width(); 
    $(window).resize(function(){ 
     var newWidth = $(window).width(); 
     if(newWidth !== cachedWidth){ 
      //DO RESIZE HERE 
      cachedWidth = newWidth; 
     } 
    });

來源

2017-03-08 12:42:51 weBBer

感覺哈克檢查窗口的大小，看它是否已經改變。相反，使用jQuery爲您提供的資源！

在事件處理程序中，您可以檢查jQuery事件的target字段，該字段始終設置爲始發事件的DOM元素。如果用戶調整窗口大小，將會是窗口target。如果用戶調整#someDiv，則target將是#someDiv。

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

來源

2017-04-24 22:13:41

你以前檢查過你的答案嗎？在iOS上滾動它會觸發window.resize事件（與目標窗口），因此您不能說它是否真的調整大小，讓我們唯一的解決方案來檢查它存儲的值（但你可以優化一點點並僅對iOS進行此操作 - 也請查看導航器代理） – qdev 2018-02-11 12:17:31

iphone/ipad觸發意外調整大小事件

回答

相關問題