使用 $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
     }
}

或者，假设它是出于样式目的，您可以使用 CSS

@media

像这样的查询

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

Answer 3

您也可以使用这个：

window.onresize = changingOnResizing;

function changingOnResizing() {
// enter your code
}