こんにちは！Dmitri Pavlutinによる「JavaScriptで画面、ウィンドウ、およびWebページのサイズを取得する方法」
という短いメモの翻訳を紹介します。 ブラウザウィンドウの方向（横または縦）を確認するには、その幅と高さを比較します。 ただし、画面サイズ、ウィンドウサイズ、Webページなど、利用可能なすべてのサイズで混乱するのは簡単です。 これらのサイズは何を意味し、最も重要なのはそれらをどのように取得するかです。これについてお話します。
1.スクリーン
1.1。画面サイズ
画面サイズは、画面全体の幅と高さ（モニターまたはモバイルディスプレイ）です。オブジェクトプロパティ
を使用して、画面サイズに関する情報を取得でき
screenますwindow。
const screenWidth = window.screen.width
const screenHeight = window.screen.height
1.2。利用可能な画面サイズ
使用可能な画面サイズは、オペレーティングシステムのツールバーを除いたアクティブな画面の幅と高さです。
利用可能な画面サイズを取得するには、再度以下を参照してください
window.screen。
const availableScreenWidth = window.screen.availWidth
const availableScreenHeight = window.screen.availHeight
2.ウィンドウ
2.1。外部ウィンドウサイズ（または外部ウィンドウサイズ）
外側のウィンドウサイズは、アドレスバー、タブバー、およびその他のブラウザーバーを含む現在のブラウザーウィンドウの幅と高さです。
プロパティ
outerWidthとouterHeightオブジェクトを使用して、外部ウィンドウのサイズに関する情報を取得できますwindow。
const windowOuterWidth = window.outerWidth
const windowOuterHeight = window.outerHeight
2.2。内部ウィンドウサイズ（または内部ウィンドウサイズ）
ウィンドウの内部サイズは、ビューポート（ビューポート）の幅と高さです。
オブジェクト
windowはプロパティinnerWidthを提供し、innerHeight：
const windowInnerWidth = window.innerWidth
const windowInnerHeight = window.innerHeight
スクロールバーなしでウィンドウの内部サイズを取得したい場合は、次のようにします。
const windowInnerWidth = document.documentElement.clientWidth
const windowInnerHeight = document.documentElement.clientHeight
3. Webページのサイズ
Webページのサイズは、表示されるコンテンツ（レンダリングされたコンテンツ）の幅と高さです。
以下を使用して、Webページのサイズを取得します（ページのパディングは含まれますが、境界線、パディング、およびスクロールバーは含まれません）。
const pageWidth = document.documentElement.scrollWidth
const pageHeight = document.documentElement.scrollHeight
pageHeightウィンドウの内側の高さより大きい
場合、垂直スクロールバーが表示されます。
4.まとめ
うまくいけば、さまざまなサイズを取得する方法を理解できました。
画面サイズはモニター（またはディスプレイ）のサイズであり、利用可能な画面サイズはOSツールバーなしの画面サイズです。
外部ウィンドウのサイズはアクティブなブラウザーウィンドウのサイズ（検索バー、タブバー、開いているサイドパネルなどを含む）であり、内部ウィンドウのサイズはビューポートのサイズです。
最後に、Webページのサイズはコンテンツのサイズです。
ご静聴ありがとうございました！