screen.width 不检查窗口调整大小答案

【问题标题】：screen.width not checking for a window resizescreen.width 不检查窗口调整大小
【发布时间】：2017-01-19 16:15:16
【问题描述】：

我目前正在使用此脚本来查看访问我网站的用户的屏幕宽度是否小于 800。我遇到的问题是，我还希望在用户将屏幕宽度调整为小于800。这怎么可能实现？

目前脚本仅在最大屏幕宽度低于 800 时显示警报。

例如，我希望当用户的宽度为 1000 但随后将其浏览器宽度缩小到 720 时触发此消息。

  if (screen.width <= 800) {
    window.alert("screen smaller than 800");
  }

【问题讨论】：

在你的脚本中监听resize事件
为了将来参考，请始终记住首先向 Google 查询：screen.width not checking for a window resize 的查询已经为您提供所需的一切。仅供参考。
如果您需要此宽度检查，也仅供参考，因为您正在修改 UI，然后使用 CSS 媒体查询将是一个更好的解决方案
@Pekka웃 我以为我们喜欢让 SO 成为谷歌的最佳答案，现在它是。否则，我们应该作为骗子关闭
@JuanMendes 不过，其他前 3 个结果已经是 Stack Overflow 的答案了。

【解决方案1】：

将其包装在resize event 中，您需要获取window's width，而不是screen's width

window.addEventListener("resize", function() {
   if (window.innerWidth <= 800) {
       window.alert("screen smaller than 800");
   }
})

【讨论】：

【解决方案2】：

你需要：

window.addEventListener('resize', function() {
  if (window.innerWidth <= 800) {
    window.alert("screen smaller than 800");
  }
}, true);

【讨论】：

@LewisDay 请记住，使用addEventListener 是首选方式，因此您不会覆盖任何侦听器，而且screen.width 不会改变，除非您旋转显示器：p
@Juan Mendes 是的，我同意

【解决方案3】：

您可以使用调整大小功能做到这一点：

var width = $(window).width();

$(window).resize(function(){
  if ($(this).width() <= 800) {
    window.alert("screen smaller than 800");
  }   
});

【讨论】：