javascript - javascript で $watch を使用してブラウザの解像度の変化を window.innerWidth で監視する

Question

クライアントのブラウザでの現在の画面解像度を知る必要があります。

計算を行うには、この情報が必要です。

これが私の機能になります：

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

ご覧のとおり、通常の $watch 関数を使用したいと考えています。私の問題は、何を見たらいいのかわからないことです。window.innerWidth を見てみましたが、うまくいきません。これは初めて値を与えるだけだからだと思いました。

おそらく簡単な解決策があると思います。

ありがとう。

score 8 · Accepted Answer

にバインドしますonresize。

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

score 6 · Accepted Answer

これを使用できます

 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
}

2 に答える 2