使用带有javascript的$ watch观看window.innerWidth以查看浏览器分辨率的变化

Question

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

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

这将是我的职能：

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

你可以看到我想使用普通的$ watch功能。我的问题是我不知道该看什么。我试过看window.innerWidth但这不起作用。我想因为这只是第一次给出一个值。

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

感谢。

Answer 1

您可以使用此

 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 2

绑定到onresize，例如

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