Safari 中的 $(window).resize() ：为什么它在滚动 window 时也有效（但不调整大小）？

Question

我注意到，在我的 iphone5 上使用 safari

$(window).resize()

它的工作方式很奇怪...

我有这个代码：

$(document).ready(function () {
 $(window).resize(function() {
     avviaChart();
     initialize();
     if($('#time').is(':checked')){ 
         $("#time").removeAttr('checked');
         $("#Time").css('border','2px solid #ffffff');
     }  
  });   
});

此代码仅在 window 的大小发生变化时才有效.... 与其他浏览器一起工作非常好，但是如果我滚动页面（并且 window 的大小不变）...

这怎么可能？ O.o

Answer 1

这是 iOS6 Safari 中发生的已知错误。调整大小事件在滚动时随机触发。还好it's not a jQuery issue.

This answer 类似的问题也可能解决您的问题。

对于懒人：

3Stripe 发帖说你应该 "Store the window width and check that it has actually changed before proceeding with your $(window).resize function"

他的代码片段：

jQuery(document).ready(function($) {

    /* Store the window width */
    var windowWidth = $(window).width();

    /* Resize Event */
    $(window).resize(function(){
        // Check if the 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

    });

});

Answer 2

如您所见，在 iphone/ipad 和 android 设备中，当您向下滚动页面时，地址栏会变小，而当滚动到顶部时，地址栏的大小将为 return到实际大小，此操作会触发 window.resize 事件

Answer 3

此问题特定于 ios，如果任何更改 window 中任何内容大小的处理程序将触发调整大小事件，有时它会卡在 infinite resize call 中。所以如上所述，有一个条件比较 previous width 和 current width 如果两者相等则 return.

Safari 中的 $(window).resize() ：为什么它在滚动 window 时也有效（但不调整大小）？

$(window).resize() in safari : why it works also if scroll window (but doesn't resize)?

html

javascript

jquery

cross-browser

mobile-safari