「画面サイズ取得」は「どの“枠”のサイズが欲しいか」を決めるところから始まる
まず一番大事なことから。
「画面サイズ」と一口に言っても、実は何種類かあります。
ブラウザのウィンドウ全体のサイズ
ウィンドウの中で「ページが見えている部分」のサイズ
デバイスそのもの（モニタ・スマホ画面）のサイズ
どれが欲しいかによって、使うプロパティが変わります。
初心者が最初に覚えるべきは、
「今、ページとして見えている領域の幅・高さ」
＝ window.innerWidth / window.innerHeight
です。ここをしっかり押さえたうえで、他の選択肢も見ていきます。
一番よく使うのは window.innerWidth / innerHeight
「今見えているブラウザの中身のサイズ」を取る
window.innerWidth と window.innerHeight は、
「ブラウザのウィンドウの中で、実際にページが表示されている領域のサイズ」 をピクセル単位で返します。
console.log(window.innerWidth); // 例: 1280
console.log(window.innerHeight); // 例: 720
ここでいう「表示されている領域」は、
アドレスバーやタブ、開発者ツールなどを除いた、
純粋に「ページが描かれている部分」です。
レスポンシブ対応（スマホか PC かでレイアウトを変える）
一定幅以下ならメニューを折りたたむ
スクロールアニメーションの開始位置を決める
こういった場面では、まず innerWidth / innerHeight を使うことが多いです。
画面サイズが変わったら取り直す（resize イベント）
ユーザーがウィンドウをリサイズしたり、
スマホを縦向き・横向きに回転させたりすると、innerWidth / innerHeight の値は変わります。
その変化を検知したいときは、resize イベントを使います。
function logSize() {
console.log("幅:", window.innerWidth, "高さ:", window.innerHeight);
}
window.addEventListener("resize", logSize);
// 初回も一度表示
logSize();
これで、ウィンドウサイズが変わるたびに、
新しい幅・高さがコンソールに表示されます。
「サイズに応じて UI を変える」処理を書くときは、
このパターンが基本形になります。
documentElement.clientWidth / clientHeight との違い
document.documentElement.clientWidth も「見えている幅」だが…
もう一つよく出てくるのが、これです。
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
document.documentElement は <html> 要素のことです。
その clientWidth / clientHeight は、
「スクロールバーを除いた、コンテンツ領域のサイズ」 を返します。
innerWidth とほぼ同じ値になることが多いですが、
ブラウザやスクロールバーの有無によって微妙に違うことがあります。
ざっくり言うと、
innerWidth
ブラウザの「ビューポート」の幅（スクロールバー込み）
documentElement.clientWidth
スクロールバーを除いたコンテンツの幅
というイメージです。
初心者のうちは、
「とりあえず innerWidth を使う」で十分です。
「スクロールバーを含めるかどうか」を意識したくなったら、clientWidth にも目を向ける、くらいでOKです。
screen.width / height は「デバイス全体の画面サイズ」
モニタやスマホ画面そのもののサイズ
screen オブジェクトは、
「デバイスの画面（モニタ・スマホディスプレイ）全体の情報」 を持っています。
console.log(screen.width, screen.height);
例えば、フルHD のモニタなら 1920 x 1080 が返ってきたりします。
ただし、ここで注意したいのは、
ブラウザのウィンドウが小さくてもscreen.width / screen.height は変わらない
ということです。
つまり、
「ユーザーのモニタがどのくらいの解像度か」を知るには使える
「今ページとして見えている領域のサイズ」を知るには向かない
という性質があります。
いつ使うのか
正直、実務では screen.width / height を直接使う場面は多くありません。
「フルスクリーン表示のときに参考にする」
「ざっくりとデバイスの解像度をログに残す」
といった用途が中心です。
レイアウトやレスポンシブ対応には、
やはり window.innerWidth / innerHeight を使うのが基本です。
実用例：画面幅に応じてメッセージを変える
HTML
<div id="info"></div>
JavaScript
const info = document.querySelector("#info");
function updateMessage() {
const w = window.innerWidth;
const h = window.innerHeight;
let message = `幅: ${w}px, 高さ: ${h}px`;
if (w < 600) {
message += "（スマホサイズっぽい）";
} else if (w < 1024) {
message += "（タブレット or 小さめPCっぽい）";
} else {
message += "（大きめのPC画面っぽい）";
}
info.textContent = message;
}
window.addEventListener("resize", updateMessage);
updateMessage();
ここでやっていることは、
window.innerWidth / innerHeight でサイズ取得
幅に応じてメッセージを変えるresize イベントで変化に追従
という、画面サイズ取得の典型的な使い方です。
このパターンを一度自分の手で書いてみると、
「画面サイズを取る → それに応じて UI を変える」という流れが、かなり体感として入ってきます。
もう一歩だけ踏み込む：devicePixelRatio の話
CSS ピクセルと実ピクセルの違い
最近のスマホや高解像度ディスプレイでは、
「見た目上の 1px」と「物理的な 1px」が一致しません。
そこで出てくるのが window.devicePixelRatio です。
console.log(window.devicePixelRatio); // 例: 1, 2, 3 など
例えば、devicePixelRatio が 2 の場合、
「CSS 上の 1px」が「物理的な 2px × 2px」で描かれます。
画面サイズ取得そのものとは少し別の話ですが、
キャンバスの描画を高解像度にしたい
スクリーンショットや画像生成で解像度を意識したい
といった場面では、innerWidth / innerHeight と devicePixelRatio を組み合わせて考えることになります。
初心者の段階では、
「そういう概念があるんだ」くらいで十分です。
初心者として「画面サイズ取得」で本当に掴んでほしいこと
「画面サイズ」と言っても、どの“枠”のサイズが欲しいかで使うプロパティが変わる
レイアウトやレスポンシブ対応では、まず window.innerWidth / innerHeight を使う
サイズ変化に追従したいときは window.addEventListener("resize", ...) で取り直すscreen.width / height は「デバイス全体の解像度」であって、ウィンドウサイズではない
必要に応じて document.documentElement.clientWidth などもあるが、最初は innerWidth を軸に考えればよい
一度、ブラウザのコンソールで
console.log(window.innerWidth, window.innerHeight);
console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
console.log(screen.width, screen.height);
を叩いて、
ウィンドウをリサイズしながら値の変化を眺めてみてください。
「どの値がどう変わるのか」を自分の目で見ると、
画面サイズ取得の感覚が一気にクリアになります。