19

我最近遇到了一些非常奇怪的事情，我不确定是不是我只是错过了一些东西，但我不明白为什么会这样。

我有一个网站，上面运行着以下 jQuery 片段：

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

当我在 Android 手机浏览器上访问该站点时，只需上下滚动该站点，就可以看到警报。

Android 浏览器滚动条（淡入和淡出）覆盖在整个站点的顶部，并且似乎不会导致任何窗口大小的调整，所以我猜这个事件并没有被他们触发。

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

任何信息将不胜感激。

编辑：

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

编辑＃2：

我在我的 HTML 中使用以下元标记：

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

3 回答 3

7

我遇到了同样的问题，我的解决方案是检查窗口大小是否真的改变了，为此我需要将过去的窗口宽度存储在我的应用程序的某个位置。代码可能是这样的：

$(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 浏览器会隐藏并显示地址文本框，从而使窗口高度在垂直滚动时发生变化

于 2013-05-09T04:11:38.617 回答
3

@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” 方法非常匹配。

于 2015-02-06T03:57:48.303 回答
1

我也有同样的问题！
问题是真的，因为当 url 栏隐藏和显示时，Android 中浏览器的高度会发生变化。所以，我们必须让浏览器重新加载只在宽度大小改变时发生。 我在 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);
      };
于 2014-06-19T02:46:32.003 回答