JavaScript課題：端末の画面サイズが縦長か横長かをチェックする

端末の幅と高さをチェックし、縦長か横長かを判定して表示するプログラムを作ってください。

実行イメージ

仕様

起動時、ウインドウサイズ変更、スマホの傾きで天地が入れ替わった時にメッセージをブラウザ画面に表示する
メッセージは3種類「縦長です」「横長です」「縦横同じです」
メッセージには、ブラウザの表示領域の幅と高さ情報を含める

表示例

横長です WxH = 1280x569

ヒント

resizeイベント、innerWidth、innerHeight

解答例

解答例をみる

サンプルサイト

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
    <title>resize tatenaga yokonaga</title>
</head>
<body>
    <main>
        <p id="message"></p>
    </main>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

body{
    display: grid;
    grid-template-columns: 100vw;   /* ビューポート幅最大 */
    grid-template-rows: 100vh;      /* ビューポート高さ最大 */
}
 
main{
    justify-self: center;   /* 横方向中央揃え */
    align-self: center;     /* 縦方向中央揃え */
 
    font-size: 5vw;
}

main.js

// main.js

// 表示用
let message = null;

// 縦長か横長かチェックする関数
const tatenagaYokonagaCheck = ()=>{
    // ブラウザの表示エリアサイズを取得
    const width = window.innerWidth;
    const height = window.innerHeight;

    // 判定：縦長 or 横長 or 縦横同じ
    let text = "縦横同じです";

    if(width > height){
        text = "横長です";
    }
    else if(height > width){
        text = "縦長です"
    }

    // 判定結果と端末サイズ表示
    message.textContent = `${text} WxH = ${width}x${height}`;
};

// 起動時の処理
window.addEventListener("load", ()=>{
    message = document.getElementById("message");
    tatenagaYokonagaCheck();
});

// 端末リサイズ時の処理
window.addEventListener("resize", tatenagaYokonagaCheck, false);