安卓浏览器在滚动时会触发jQuery的$(window).resize()方法

Question

最近我遇到了一件相当奇怪的事情，我不确定是不是我漏看了什么，但我无法理解为什么会发生这种情况。

我的网站上运行着以下jQuery代码片段：

$(window).resize(function(){
  alert("Resize fired!");
});

当我在Android手机浏览器上访问该网站并简单地上下滚动网页时，我能看到警报。

Android浏览器的滚动条（会淡入淡出）覆盖了整个网站，似乎并不会导致窗口大小的改变，所以我猜测这个事件并不是由它们触发的。

有人知道为什么Android浏览器在滚动时会触发此事件吗？

任何信息将不胜感激。

编辑：

我尝试设置CSS为body，将overflow-y设置为scroll，以查看是否存在可行的解决方案，但在Android上仍然会在滚动时触发事件。

第二次编辑：

我在HTML中使用以下meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

- Dan

---

我在iOS上遇到了类似的奇怪问题（请参见https://dev59.com/5mzXa4cB1Zd3GeqPXs3K）。你尝试过一个空白的HTML（其中包含viewport meta）和只有resize警报吗？那时它还会触发吗？ - Klaas Leussink

@c_kick 我可以确认这个问题发生在一个空白的HTML测试页面上。我已经通过改变我的网站行为来解决了这个问题，但是我找不到任何在线信息来解释为什么会出现这种情况。 - Dan

我会尝试绑定到 $(window).scroll 事件，并在滚动发生时设置 $(window).resize(function(e) { e.stopPropagation(); }。但我非常赞同您的观点，这很烦人，不应该需要解决方法。 - Klaas Leussink

经过我的测试，看起来这是因为设备顶部的浏览器界面出现和消失，而不是滚动条。因此，宽度不是问题所在。 - John McCollum

Answer 1

我曾经遇到过同样的问题，我的解决方案是检查窗口尺寸是否真正发生了变化，为此我需要在我的应用程序中存储过去的窗口宽度。代码可能如下所示：

$(window).resize(function() {
  clearTimeout(app.resize.timer)
  app.resize.timer = setTimeout(function(){
     var window_changed = $(window).width() != app.size.window_width
     if(window_changed) console.log('Window size changed! resize site')
  }, 500)               
})

我没有考虑窗口高度，因为我的安卓浏览器在我向下滚动网站时隐藏和显示地址文本框，使得垂直滚动时窗口高度发生变化。

- chilljul

Answer 2

@john-mccollum在评论中是正确的。看起来是浏览器界面消失导致高度变化从而触发了resize事件。因此，如果你正在进行响应式设计并想要检查宽度是否已被调整，请在你的函数中特别检查宽度的变化。

$(window).resize(function(){
    var w = $(window).width();
    if (typeof checkw == 'undefined') checkw = w;
    if (w!=checkw) {
        console.log("The width changed from "+checkw+" to "+w);

        // do your responsive magic!

        checkw = w;
    }
});

这不是使其工作所必需的，但它与Paul Irish / John Hann "smartresize"方法非常搭配。

- squarecandy

Answer 3

我也遇到了同样的问题！问题在于Android浏览器的高度会在URL栏隐藏和显示时发生变化。因此，我们只有在宽度大小发生变化时才需要重新加载浏览器。

我看到了这个Stackoverflow的问题，告诉我如何做。这是jsfiddle的链接。

      var doit;
      function resizedw(appwidth){
          var window_changed = $(window).width() != appwidth;
          if ($(window).width() != appwidth){
            ("body").append("did it"+appwidth+" ");
          }
          past_width = $(window).width();
      }

      var past_width = $(window).width();
      window.onresize = function() {
        clearTimeout(doit);
        doit = setTimeout(function() {
            resizedw(past_width);
        }, 100);
      };

- lutfianasari