JavaScriptでウィンドウサイズを取得する方法と注意点10選

●JavaScriptでウィンドウサイズを取得する方法

JavaScriptを使ったWeb開発をしている皆さん、こんにちは。

レスポンシブデザインを実装する上で、ウィンドウサイズを取得することは非常に重要ですよね。

デバイスや画面サイズに応じて動的にレイアウトを調整し、ユーザーに最適なUIを提供するためには欠かせない技術です。

でも、ウィンドウサイズの取得方法って意外と奥が深いです。

単純にwindow.innerWidthやwindow.innerHeightを使えば良いだけじゃありません。

状況に応じて使い分ける必要があります。

そこで今回は、JavaScriptでウィンドウサイズを取得する様々な方法と、その注意点について詳しく解説していきます。

初心者の方にもわかりやすく、コード例を交えながら順を追って説明しますので、ぜひ最後までお付き合いください。

○window.innerWidthとwindow.innerHeight

まずは、JavaScriptでウィンドウサイズを取得する基本的な方法から見ていきましょう。

window.innerWidthとwindow.innerHeightは、ウィンドウの内部の幅と高さを取得するためのプロパティです。

これにはスクロールバーの幅も含まれます。

□サンプルコード1：現在のウィンドウ幅と高さを取得

const width = window.innerWidth;
const height = window.innerHeight;

console.log(`現在のウィンドウサイズは ${width} x ${height} です。`);

実行結果

現在のウィンドウサイズは 1280 x 720 です。

このコードを実行すると、現在のウィンドウの幅と高さがピクセル単位で表示されます。

レスポンシブデザインを実装する際、この値を使ってレイアウトを動的に切り替えることができます。

ただ、モバイルデバイスのように画面の向きが変わる場合、innerWidthとinnerHeightの値も変化するので注意が必要です。

縦向きと横向きで適切にレイアウトを調整できるよう工夫しましょう。

○document.documentElement.clientWidthとclientHeight

一方、document.documentElement.clientWidthとclientHeightは、ウィンドウの内部の幅と高さを取得しますが、スクロールバーの幅は含まれません。

□サンプルコード2：スクロールバーを除いた幅と高さ

const width = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;

console.log(`スクロールバーを除いたウィンドウサイズは ${width} x ${height} です。`);

実行結果

スクロールバーを除いたウィンドウサイズは 1265 x 720 です。

innerWidthとinnerHeightの値よりも若干小さい値が表示されたのではないでしょうか。

スクロールバーの幅分だけ差が出ます。

レイアウトの微調整が必要な場合など、より正確なウィンドウサイズが知りたい時はこちらを使うと良いでしょう。

ただ、ブラウザによってはclientWidthとclientHeightが利用できない場合があるので、サポート状況を確認しておくことをオススメします。

○window.outerWidthとwindow.outerHeight

最後に、window.outerWidthとwindow.outerHeightを紹介します。

これらは、ブラウザのウィンドウ全体のサイズ、つまりブラウザのUI部分も含めた幅と高さを取得するプロパティです。

□サンプルコード3：ブラウザ全体のサイズを取得

const width = window.outerWidth;
const height = window.outerHeight;

console.log(`ブラウザウィンドウ全体のサイズは ${width} x ${height} です。`);

実行結果

ブラウザウィンドウ全体のサイズは 1280 x 800 です。

ブラウザのツールバーやタブなども含めた全体のサイズが表示されます。

outerWidthとouterHeightはあまり使う機会は少ないかもしれませんが、ポップアップウィンドウのサイズを指定する際などに役立ちます。

●ウィンドウサイズの変更を検知する

さて、ウィンドウサイズを取得する方法はわかりましたが、実際のWebサイトやアプリではユーザーがウィンドウサイズを変更することもありますよね。

そんな時、リアルタイムでレイアウトを調整したいと思いませんか？

そこで登場するのが、ウィンドウサイズの変更を検知するための仕組みです。

JavaScriptには、ウィンドウサイズが変更された時に発生するイベントや、要素のリサイズを監視するためのAPIが用意されています。

○window.onresizeイベント

まずは、window.onresizeイベントを使ってみましょう。

これは、ウィンドウのサイズが変更される度に発生するイベントです。

このイベントにリスナを登録することで、リサイズ時に任意の処理を実行できるようになります。

□サンプルコード4：リサイズ時に処理を実行

window.onresize = function() {
  const width = window.innerWidth;
  const height = window.innerHeight;
  console.log(`ウィンドウサイズが変更されました。現在のサイズは ${width} x ${height} です。`);
  // ここに、リサイズ時に行いたい処理を記述する
};

実行結果（ウィンドウサイズを変更する度にログが出力される）

ウィンドウサイズが変更されました。現在のサイズは 1280 x 720 です。
ウィンドウサイズが変更されました。現在のサイズは 960 x 720 です。
ウィンドウサイズが変更されました。現在のサイズは 960 x 480 です。

このコードでは、window.onresizeにリサイズ時の処理を記述した関数を代入しています。

ウィンドウサイズが変更される度に、現在のウィンドウサイズを取得してログ出力しています。

ここに、リサイズ時に行いたい処理、例えばレイアウトの調整やグラフの再描画などを記述することで、動的に変化するレスポンシブデザインを実現できます。

ただ、リサイズイベントは非常に高頻度で発生するため、処理は軽量に留めることが大切ですね。

○ResizeObserverAPI

続いて、ResizeObserverAPIを見ていきましょう。

これは、指定した要素のリサイズを監視することができる機能です。

要素単位でリサイズを検知できるので、部分的なレイアウト調整に役立ちます。

□サンプルコード5：要素のリサイズを検知

const targetElement = document.getElementById('myElement');

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const width = entry.contentRect.width;
    const height = entry.contentRect.height;
    console.log(`要素がリサイズされました。現在のサイズは ${width} x ${height} です。`);
    // ここに、リサイズ時に行いたい処理を記述する
  }
});

observer.observe(targetElement);

実行結果（要素のサイズを変更する度にログが出力される）

要素がリサイズされました。現在のサイズは 400 x 300 です。 
要素がリサイズされました。現在のサイズは 800 x 300 です。
要素がリサイズされました。現在のサイズは 800 x 600 です。

ResizeObserverを使うには、まず監視対象の要素を取得します。

次に、ResizeObserverのインスタンスを生成し、リサイズ時のコールバック関数を登録します。

最後に、observeメソッドで監視対象の要素を渡すことで、リサイズの検知が開始されます。

コールバック関数の引数には、ResizeObserverEntryオブジェクトの配列が渡されます。

各エントリのcontentRectプロパティから、リサイズ後の幅と高さを取得できます。

グリッドレイアウトの調整や、要素内のコンテンツの再配置など、部分的なリサイズ対応が必要な場合に活用してみてください。

ただし、ResizeObserverは比較的新しいAPIなので、ブラウザのサポート状況を確認しておくことが大切です。

それでは、次はモバイルデバイス特有の画面サイズ対応について見ていきたいと思います。

スマートフォンやタブレットなど、多様なデバイスに対応することも重要なポイントですよ。

●モバイルデバイスの画面サイズ対応

スマートフォンやタブレットの普及に伴い、モバイルデバイスへの対応はもはや欠かせません。

しかし、モバイルデバイスの画面サイズはPCとは大きく異なるため、ウィンドウサイズの取得方法にも一工夫が必要です。

そこで、モバイルデバイス特有の画面サイズを取得する方法を見ていきましょう。

きっと、レスポンシブデザインを極める上で役立つはずです。

○screen.widthとscreen.height

まずは、screen.widthとscreen.heightを使って、デバイスの画面サイズを取得してみましょう。

これらのプロパティは、デバイスの物理的な画面の幅と高さを返します。

□サンプルコード6：デバイスの画面サイズ取得

const screenWidth = screen.width;
const screenHeight = screen.height;

console.log(`デバイスの画面サイズは ${screenWidth} x ${screenHeight} です。`);

実行結果（iPhoneXでの例）

デバイスの画面サイズは 375 x 812 です。

ただ、この方法にはちょっとした落とし穴があります。

screen.widthとscreen.heightは、デバイスの向きに応じて値が変わるんです。

つまり、横向きにすると幅と高さが入れ替わってしまうことがあるんですよね。

ですから、画面の向きが変わっても一貫したレイアウトを維持するには、別のアプローチが必要です。

でも、デバイスの物理的な解像度を知るには便利な方法だと覚えておいてください。

○window.matchMedia()

それでは、もう一つの方法として、window.matchMedia()を使ってみましょう。

これは、CSSのメディアクエリをJavaScriptから利用するための機能です。

メディアクエリを使えば、画面サイズに応じて柔軟に処理を分岐できるんです。

□サンプルコード7：メディアクエリでの分岐

const mobileQuery = window.matchMedia('(max-width: 600px)');

function handleMobileChange(event) {
  if (event.matches) {
    console.log('モバイル端末用のレイアウトを適用します。');
    // ここに、モバイル端末用の処理を記述する
  } else {
    console.log('PC用のレイアウトを適用します。');
    // ここに、PC用の処理を記述する
  }
}

mobileQuery.addListener(handleMobileChange);
handleMobileChange(mobileQuery);

実行結果（画面幅が600px以下の場合）

モバイル端末用のレイアウトを適用します。

matchMedia()メソッドに、メディアクエリの条件を文字列で渡します。

ここでは、'(max-width: 600px)’という条件を指定しています。

これは、画面幅が600px以下の場合にtrueを返すクエリです。

返り値のMediaQueryListオブジェクトのaddListener()メソッドを使って、メディアクエリの条件が変化した時に呼び出されるリスナ関数を登録します。

リスナ関数内で、画面サイズに応じた処理を記述します。

そして、最初に一度リスナ関数を手動で呼び出すことで、初期表示時にも適切なレイアウトが適用されるようにしています。

この方法なら、画面の向きが変わっても、設定したメディアクエリの条件に基づいて確実に処理を切り替えられます。

レスポンシブデザインを実現する上で、とても有用なテクニックだと思います。

●ウィンドウサイズ取得時の注意点

ここまで、JavaScriptでウィンドウサイズを取得する様々な方法について見てきました。

でも、実はまだ注意しなければならないポイントがあるんです。

ユーザーがブラウザでズームを使っていたり、デバイスのピクセル比が1でない場合、ウィンドウサイズの取得結果に影響が出ることがあります。

これらの要因を理解し、適切に対処することが、正確なレイアウト調整には欠かせません。

ですから、ウィンドウサイズを取得する際の注意点について、もう少し掘り下げてみましょう。

きっと、レスポンシブデザインの実装をより洗練されたものにするヒントが見つかるはずです。

○ズーム倍率による影響

まず、ブラウザのズーム機能による影響について考えてみましょう。

ユーザーが画面を拡大・縮小している場合、ウィンドウサイズの取得結果はズーム倍率に応じて変化します。

例えば、ズーム倍率が150%の場合、innerWidthやinnerHeightの値は実際の1.5倍になります。

つまり、ズームを考慮しないと、意図したサイズとは異なるレイアウトが適用されてしまう可能性があるんです。

ズーム倍率を取得するには、window.devicePixelRatioプロパティを使います。

これは、物理ピクセルとCSSピクセルの比率を返します。

ズーム倍率が100%の場合は1、200%の場合は2になります。

この値を使って、ズームの影響を排除したウィンドウサイズを計算できます。

具体的には、innerWidthやinnerHeightをdevicePixelRatioで割ることで、ズームを考慮しない値が得られます。

ただ、ズーム倍率の扱いは慎重に検討する必要があります。

ユーザーがズームを使っている理由を考えると、一律にズームを無視するのは適切ではないかもしれません。

状況に応じて柔軟に対応することが大切ですね。

○CSSピクセルとデバイスピクセルの違い

続いて、CSSピクセルとデバイスピクセルの違いについて見ていきましょう。

最近のデバイスは、高解像度ディスプレイを搭載しているものが多いですよね。

例えば、iPhone XのようなRetinaディスプレイでは、1つのCSSピクセルが複数の物理ピクセル（デバイスピクセル）に対応しています。

つまり、CSSで指定したサイズと、実際の画面上のサイズが異なるんです。

この違いを理解しておかないと、意図したレイアウトにならない可能性があります。

特に、画像などのメディアコンテンツを扱う場合は注意が必要です。

CSSピクセルとデバイスピクセルの比率は、先ほど紹介したwindow.devicePixelRatioプロパティで取得できます。

この値を使って、メディアクエリでデバイスピクセル比に応じた条件分岐を行ったり、画像のサイズを調整したりすることができます。

ただ、devicePixelRatioはズーム倍率の影響も受けるので、ズームとデバイスピクセル比の両方を考慮する必要があります。

ちょっとややこしいですが、ユーザー体験を向上させるために、丁寧に対処していきたいところです。

○iOSのviewportの問題

最後に、iOSデバイスに特有の問題について触れておきましょう。

iOSでは、viewportの初期設定が他のプラットフォームと異なります。

具体的には、iOSのデフォルトのviewportは980pxに設定されており、ページを自動的に縮小して表示します。

これにより、横幅が実際のデバイス幅よりも大きく計算されてしまうんです。

この問題を解決するには、HTMLの<head>タグ内に次のようなメタタグを追加します。

<meta name="viewport" content="width=device-width, initial-scale=1">

これにより、viewportの幅をデバイスの幅に合わせ、初期の拡大率を1に設定することができます。

iOSデバイス向けのレスポンシブデザインを実装する際は、このメタタグを忘れずに指定しましょう。

さて、ここまでウィンドウサイズの取得方法と注意点について詳しく見てきました。でも、知識だけでは不十分ですよね。

実際にレスポンシブデザインに活かすことが大切です。

そこで、次はウィンドウサイズを利用したレスポンシブデザインの応用例を見ていきましょう。

実践的なテクニックを身につけて、ユーザーに最適なUIを提供できるエンジニアを目指しましょう。

●レスポンシブデザインへの応用

さて、ここまでウィンドウサイズの取得方法と注意点について詳しく見てきましたが、実際にレスポンシブデザインに活かすことが何より大切ですよね。

せっかく身につけた知識を実践で生かさない手はありません。

ですから、最後はウィンドウサイズを利用したレスポンシブデザインの応用例を見ていきましょう。

きっと、ユーザーに最適なUIを提供するためのヒントが見つかるはずです。

それでは、実際のコード例を交えながら、レスポンシブデザインのテクニックを習得していきましょう。

○サンプルコード8：画像のサイズ調整

まずは、画像のサイズをウィンドウサイズに応じて調整する方法から見ていきます。

レスポンシブデザインにおいて、画像の扱いは非常に重要なポイントです。

画面サイズが変わっても、画像が適切なサイズで表示されるようにしたいですよね。

そこで、JavaScriptとCSSを組み合わせて、画像のサイズを動的に調整してみましょう。

<img id="resizable-image" src="sample.jpg" alt="サンプル画像">

#resizable-image {
  max-width: 100%;
  height: auto;
}

function adjustImageSize() {
  const image = document.getElementById('resizable-image');
  const windowWidth = window.innerWidth;

  if (windowWidth < 600) {
    image.style.width = '100%';
  } else {
    image.style.width = '50%';
  }
}

window.addEventListener('resize', adjustImageSize);
adjustImageSize();

このコードでは、まずHTMLで<img>要素を配置し、CSSでmax-widthプロパティを100%に設定しています。

これにより、画像の最大幅がコンテナの幅に制限されます。

続いて、JavaScriptでは、ウィンドウ幅に応じて画像の幅を調整する関数adjustImageSize()を定義しています。

ウィンドウ幅が600px未満の場合は画像の幅を100%に、それ以外の場合は50%に設定しています。

resizeイベントにadjustImageSize()を登録することで、ウィンドウサイズが変更される度に画像サイズが調整されます。

また、ページ読み込み時にもadjustImageSize()を呼び出して初期表示を設定しています。

○サンプルコード9：テキストサイズの可変

続いて、テキストのサイズをウィンドウサイズに応じて可変にする方法を見ていきましょう。

文字の大きさを画面サイズに合わせて調整することで、読みやすさを維持できます。

CSSのメディアクエリとvw単位を使って、テキストサイズをレスポンシブに変更してみましょう。

<p class="responsive-text">これはレスポンシブなテキストです。</p>

.responsive-text {
  font-size: 4vw;
}

@media screen and (min-width: 768px) {
  .responsive-text {
    font-size: 2vw;
  }
}

このコードでは、CSSの.responsive-textクラスにfont-sizeプロパティを設定しています。

vw単位を使うことで、テキストのサイズをビューポート幅に対する割合で指定できます。

ここでは、デフォルトでfont-sizeを4vwに設定し、画面幅が768px以上の場合は2vwに変更しています。

つまり、画面が小さい場合は相対的に大きなテキストサイズで表示し、画面が大きくなるにつれてテキストサイズが小さくなります。

メディアクエリを使って、ブレークポイントごとにテキストサイズを調整することで、様々な画面サイズに対応できます。

vw単位を活用することで、JavaScriptを使わずにCSSだけでレスポンシブなテキストを実現できるのです。

ただ、vw単位の使い過ぎには注意が必要です。

テキストサイズが大きくなりすぎると、かえって読みにくくなってしまうことがあります。

状況に応じて、適度なサイズ調整を心がけましょう。

○サンプルコード10：メニューのレスポンシブ化

最後に、ナビゲーションメニューをレスポンシブに切り替える方法を見ていきます。

画面サイズが小さい場合は、メニューを折りたたんでアイコン化し、大きい場合は横並びで表示するようにしましょう。

JavaScriptを使って、ウィンドウサイズに応じてメニューの表示を切り替えてみましょう。

<nav>
  <ul id="menu">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">製品情報</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
  <button id="menu-toggle">☰</button>
</nav>

#menu {
  display: flex;
}

#menu-toggle {
  display: none;
}

@media screen and (max-width: 600px) {
  #menu {
    display: none;
  }

  #menu-toggle {
    display: block;
  }

  #menu.active {
    display: block;
  }
}

const menuToggle = document.getElementById('menu-toggle');
const menu = document.getElementById('menu');

function toggleMenu() {
  menu.classList.toggle('active');
}

function handleResize() {
  if (window.innerWidth > 600) {
    menu.classList.remove('active');
  }
}

menuToggle.addEventListener('click', toggleMenu);
window.addEventListener('resize', handleResize);

このコードでは、HTMLでナビゲーションメニューを<ul>要素で構成し、トグルボタンを配置しています。

CSSでは、デフォルトでメニューを横並びにし、トグルボタンを非表示にしています。

メディアクエリを使って、画面幅が600px以下の場合にメニューを非表示にし、トグルボタンを表示するようにしています。

また、.activeクラスが付与された場合にメニューを表示するようにしています。

JavaScriptでは、トグルボタンのクリックイベントにtoggleMenu()関数を登録し、メニューの表示/非表示を切り替えています。

また、resizeイベントにhandleResize()関数を登録し、画面幅が600pxを超えた場合にメニューを非表示にしています。

まとめ

JavaScriptでウィンドウサイズを取得する方法と注意点について詳しく解説しました。

これからのWeb開発では、レスポンシブデザインは必須の要素です。

今回学んだ知識を活かし、ユーザー体験を優先したUIづくりに取り組んでいきましょう。

常に学び続ける姿勢を大切にし、新しい技術にもチャレンジしていってください。