Question

我最近遇到了一些非常奇怪的事情，我不确定是不是我可能只是遗漏了一些东西，但我无法理解为什么会这样。

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

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

当我在Android手机浏览器上访问该网站时，只需向上和向下滚动网站，我就可以看到提醒。

Android浏览器滚动条（淡入淡出）叠加在整个网站的顶部，似乎不会导致窗口大小调整，所以我猜这个事件并没有被他们解雇。

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

非常感谢任何信息。

编辑：

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

编辑＃2：

我在HTML中使用以下metatag：

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

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)               
})

我没有指望窗口高度因为我的Android浏览器隐藏并在我向下滚动网站时显示地址文本框，使窗口高度在垂直滚动上更改

Answer 2

@ john-mccollum在评论中是正确的。它似乎是消失的浏览器界面导致高度变化触发调整大小事件。因此，如果您要执行响应式设计，并检查宽度是否已调整大小，请检查功能中的宽度变化。

$(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" method配对良好。

Answer 3

我也有同样的问题！
这个问题是正确的，因为当网址栏隐藏和显示时，Android中浏览器的高度会发生变化。因此，我们必须使浏览器重新加载仅在宽度大小改变时发生。

我看到这个question in 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);
      };

Android浏览器在滚动时触发jQuery $（window）.resize（）

3 个答案: