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

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);

コメント

タイトルとURLをコピーしました