Question

我有一些非常简单的代码：

$(function() {
    $(window).resize(function () {
        if ($(window).width() < 500) {
            $("#foo").show(); $("#foo2").hide();
        } else if ($(window).width() > 501) {
            $("#foo2").show(); $("#foo").hide();
        }
    }).resize();
});

所有这些都在桌面（所有主流浏览器）和移动设备上运行良好（我可以测试多少），直到iOS 8问世。现在，当用户在Safari中滚动时，javascript会回退到＆＃39;否则，如果＆＃39;，则创建＆＃39; foo2＆＃39;并隐藏＆＃39; foo＆＃39;尽管浏览器没有调整大小。这是一个菜单，因此如果用户滚动哪个菜单不应该发生，菜单就会关闭。

如果我删除了窗口调整大小功能，则一切正常，但是如果用户调整浏览器窗口大小，则菜单不会实时更新。

我可以使用窗口调整大小来替代效果吗？

Answer 1

...所以，考虑到我在描述问题时遇到问题，你可以避免使用纯css和媒体查询来执行此操作：

@media (max-width:500px) {
  #foo {
    display:block;
  }
  #foo2 {
    display:none;
  }
}
@media (min-width:501px) {
  #foo2 {
    display:block;
  }
  #foo {
    display:none;
  }
}

编辑 ..这肯定与滚动无关，肯定会更快更干净

Answer 2

这可能有点晚了，但是我会在加载时存储窗口的宽度，然后在调整大小时检查它，以确保实际调整大小水平。这将确保代码仅在浏览器在x轴上更改大小时触发。

var windowWidth = $(window).width();
$(window).resize(function(){
    if (windowWidth !== $(window).width())
    {
        windowWidth = $(window).width();
        // rest of your code goes here
    }
});

请记住，当某人调整大小时，resize事件可能会激活很多，因此您可能希望使用setInterval限制整个事件，但这是一个单独的讨论。

iOS 8毛刺效果窗口调整大小

2 个答案: