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

Question

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

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

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

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

Answer 1

将其包装在调整大小事件中，您需要获取窗口的宽度，而不是 屏幕的宽度

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

Answer 2

你需要：

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

Answer 3

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

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

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