javascript - iOS 8 故障影响窗口大小调整

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 会回退到“else if”，创建“foo2”并隐藏“foo”，尽管浏览器没有调整大小。这是针对菜单的，因此如果用户滚动，菜单就会关闭，而这是不应该发生的。

如果我删除窗口调整大小功能，所有功能都会正常工作，但是如果用户调整浏览器窗口大小，菜单不会实时更新。

是否可以使用调整窗口大小的替代方法来达到相同的效果？

Answer 1

...所以，考虑到我遇到了你所描述的问题，你可以避免使用 JavaScript 并使用纯 css 和媒体查询来实现:

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

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