JavaScriptで画面サイズ(幅・高さ)の変更を検知する・取得する方法(resize, onresize)

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで画面サイズ(幅・高さ)の変更を検知する・取得する方法について解説していきます。

1 画面サイズ(幅・高さ)の変更を検知する・取得する方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 プログラミング学習・エンジニア転職関連の情報
5 参考・引用
6 Twitterやってます！Follow Me！
7 最近の投稿

画面サイズ(幅・高さ)の変更を検知する・取得する方法

Windowのサイズによって何かしらの処理を実行したい時があります。

そんな時に使えるのが、今回紹介する resize と onresize です。

resize系のイベント設定すると端末の画面のサイズ変更やスマホの傾きが検出された際のチェックが可能です。

ブラウザの表示可能領域の幅と高さは、window.innerWidth, window.innerHeight でそれぞれ取得できます。

画面サイズの変更を resizeイベントで検知したらブラウザサイズを確認して、メディアクエリのように画面幅に応じた処理を実行させる。

などのハンドリングも resizeイベントと window.innerWidth, window.innerHeight の組み合わせでできます。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Window-Size</title>
</head>
<body>
<h1>Window-Resize-Event🔥</h1>
<script>

    // [ JavaScript で画面サイズ(幅・高さ)を変更を検知する・取得する方法 ]

    // Window のサイズ変更を検知して処理を実行

    // 1. window.addEventListener("resize", ()=>{});

    // 2. JavaScriptのwindow.onresize = () => {};

    console.log('Robotama-Script-起動');

    let MiddleFlag = false;

    window.addEventListener('resize', ()=> {
            
        console.log('addEventListener-resize-起動！');

        // 1. window.innerWidth に画面幅の情報が格納されている。
        const deviceWidth = window.innerWidth;

        // 2. window.innerHeight に画面の高さの情報が格納されている。
        const deviceHeight = window.innerHeight;
  
        console.log('deviceWidth', deviceWidth);
        console.log('deviceHeight', deviceHeight);

        (768 <= deviceWidth && deviceWidth <= 1200) ? MiddleFlag = true : MiddleFlag = false;

        MiddleFlag ? console.log('画面幅は、768px-1200pxのMiddle-Size！') : console.log('No-Middle-Size！');

        console.log('---------------------------------------');
    });

    
    window.onresize = () => {

        console.log('window.onresize-起動！');

        // 1. window.innerWidth に画面幅の情報が格納されている。
        const deviceWidth2 = window.innerWidth;

        // 2. window.innerHeight に画面の高さの情報が格納されている。
        const deviceHeight2 = window.innerHeight;

        console.log(`幅 × 高さ: ${deviceWidth2} × ${deviceHeight2}`);
        console.log('---------------------------------------');
    };
  </script>

</body>
</html>