画面幅がJavaScriptの値より大きいか小さいかを検出する方法

画面幅がJavaScriptで指定された値より大きいか小さいかを検出する方法を学びます。

条件に基づいてコードを実行したい場合があります。

スペースが限られているため、大画面には表示したいが小画面には表示したくないコード（ほとんどのスマートフォンなど）がある場合があります。

特定のデバイスタイプの検出の処理 は複雑な領域であり、開発者は同意できないようです。何時間にもわたる調査の後、私はまだペンを紙に置くのに十分な信頼できるデータを収集していません（続く..）。

ピクセル単位の画面幅を動的に検出する方法

幸い、ピクセル値に基づいて画面サイズをターゲティングする方がはるかに簡単であり、多くの状況でメリットが得られる機能です。

次のコードをブラウザコンソールまたはCodePenなどのオンラインエディタに貼り付けます。

window.addEventListener("resize", function() {
  if (window.matchMedia("(min-width: 500px)").matches) {
    console.log("Screen width is at least 500px")
  } else {
    console.log("Screen less than 500px")
  }
})

次に、ブラウザウィンドウのサイズを狭いものから広いものに変更し、コンソールが結果をログアウトするのを確認します。

JavaScriptコードの仕組み：

• まず、addEventListener()を添付します ウィンドウオブジェクトへのメソッド。
• イベントリスナー内で、'resize'という2つの引数を設定しました。 およびfunction() {} 。
• 最初の引数は、イベントリスナーにサイズ変更イベントをリッスンするように要求することです。 （サイズ変更のごく一部でもイベントとして登録されます）。次に、匿名の関数を実行します サイズ変更イベントに基づきます。
• 無名関数の本体内で、2つの条件付きステートメントを開始します。
• 最初の条件： 「（任意のデバイスの）画面幅が少なくとも500pxの場合、console.log（'dosomething'）」。 2番目の条件： 「画面の幅が500px未満の場合は、console.log（'何か他のことをする'）」。

CodePenのコードで遊ぶ