JavaScript を使用してユーザーのデバイスの画面解像度を検出するにはどうすればよいですか?

JavaScript での画面解像度の検出

Web 開発では、多くの場合、ユーザーのデバイスの解像度を確認する必要があります。 JavaScript は、ほとんどの最新ブラウザでこの情報を取得する便利な方法を提供します。

ブラウザの互換性

window.screen オブジェクトは、以下を含むすべての主要なブラウザでサポートされています。

• Chrome
• Firefox
• Safari
• Edge
• Opera

画面にアクセス解像度

画面の解像度を取得するには、window.screen オブジェクトの次のプロパティを使用します。

• availHeight: ツールバーを除く、ピクセル単位の利用可能な画面の高さ。
• availWidth: ツールバー、メニューなどを除く、ピクセル単位での利用可能な画面の幅。
• height: ツールバー、メニュー、など。
• 幅: ツールバー、メニューなどを含む画面の絶対幅 (ピクセル単位)。

モバイル デバイスのネイティブ解像度

モバイル デバイスのネイティブ解像度を決定するには、利用可能な幅と高さにデバイスのピクセル比を掛けます。

<code class="javascript">nativeWidth = window.screen.availWidth * window.devicePixelRatio;
nativeHeight = window.screen.availHeight * window.devicePixelRatio;</code>

絶対解像度の取得

画面 (ツールバーやメニューを含む) の絶対解像度が必要な場合は、availHeight と availWidth の代わりに高さと幅のプロパティを使用します。

例

次のコードは、利用可能な画面解像度:

<code class="javascript">let availHeight = window.screen.availHeight;
let availWidth = window.screen.availWidth;
console.log("Available screen resolution: " + availWidth + "x" + availHeight);</code>

以上がJavaScript を使用してユーザーのデバイスの画面解像度を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。