javascript - 使用 $watch 和 javascript 观察 window.innerWidth 以了解浏览器分辨率的变化

Question

我需要知道我的客户在他们的浏览器中的当前屏幕分辨率。

我需要这些信息才能进行计算。

这将是我的功能：

  scope.$watch('**??what,should,go,here??**', function() {
     scope.screen = (window.innerWidth / 2) - 150;
  });

如您所见，我想使用常规的 $watch 功能。我的问题是我不知道该看什么。我尝试观看 window.innerWidth 但这不起作用。我想是因为这只会第一次给出一个值。

我相信可能有一个简单的解决方案。

谢谢。

Answer 1

绑定到onresize，例如

window.addEventListener("resize", function () {
    // check width
});

Answer 2

你可以用这个

 window.addEventListener("resize", function () {
     // scripts
 }

但看起来你想根据窗口大小设置页面样式，所以.clientWidth我相信它就是你想要的

window.addEventListener("resize", function () {
    if (document.clientWidth < 900) {
        // scripts
     }
}

或者，假设它是出于样式目的，您可以使用@media这样的 CSS 查询

@media (max-width: 900px) and (min-width: 300px) {
    // CSS
}