【JavaScript】画面サイズを取得する方法(監視)

今回は、JavaScriptで画面サイズを取得して「画面サイズが変わるたびに高さと幅を画面に表示させる」方法について説明します！

突然ですが、画面サイズをかえてみてください。画面に合わせて Width: / Height: の値が変わるのがわかりましたね！ではコードを見てきましょう。

  // 画面サイズを監視して画面に出力する関数
  function DisplayWindowSize() {

    // ①画面サイズを取得する
    const width = window.innerWidth;
    const height = window.innerHeight;

　　　　// ②取得した画面のサイズを表示する
    document.getElementById('width').textContent = `Width: ${width}`;
    document.getElementById('height').textContent = `Height: ${height}`;
  }

// ③初期サイズを画面に出力
DisplayWindowSize();

// ④画面のサイズが変わるたびに　DisplayWindowSize()関数を呼び出す
window.addEventListener('resize', DisplayWindowSize);

コードを見てなんとなくやっていることがわかったんじゃないでしょうか。ざっくり説明すると window.innerWidth と window.innerHeight で画面サイズの初期値を取得し、addEventListener(‘resize’, 画面サイズを取得する関数)で画面のサイズが変わるたびに画面サイズの初期値を取得しなおしています。

画面ではなく、コンソールで画面サイズを確認したい場合はconsol.logを使います。

console.log(`Width: ${width}, Height: ${height}`);

サンプルコード
まとめ

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Window Size Monitor</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .size-display {
            text-align: center;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div class="size-display">
        <p id="width"></p>
        <p id="height"></p>
    </div>

    <script>
        // 画面サイズを監視してコンソールと画面に出力する関数
        function logAndDisplayWindowSize() {
            const width = window.innerWidth;
            const height = window.innerHeight;
            console.log(`Width: ${width}, Height: ${height}`);

            // 画面にサイズを表示
            document.getElementById('width').textContent = `Width: ${width}`;
            document.getElementById('height').textContent = `Height: ${height}`;
        }

        // 初期サイズをログと画面に出力
        logAndDisplayWindowSize();

        // ウィンドウのリサイズイベントにリスナーを追加
        window.addEventListener('resize', logAndDisplayWindowSize);
    </script>
</body>
</html>

まとめ

いかがでしたか？サンプルコードを実際に使って動きを確認してみてください！