ページをスマホで閲覧した時の見え方を制御する meta viewport に関する覚え書き

ページをスマホで閲覧した時の見え方を制御する meta viewport に関する覚え書きです。

ちなみに、viewport を指定しないと、ページの横幅が 980px あるものとして縮小表示されるようです。

この記事の目次非表示

属性の説明
サンプルコード
参考にさせてもらったページ

属性の説明

属性は下記の通り。プロパティはカンマで区切る。

width ( ページの幅 )
200px から 10,000px または device-width が指定可能。
デフォルトの幅は 980px
height ( ページの高さ )
223px から 10,000px または device-height が指定可能。
minimum-scale ( 倍率の最小値 )
0 から 10 が指定可能。
デフォルトは 0.25
maximum-scale ( 倍率の最大値 )
0 から 10 が指定可能。
デフォルトは 1.6
initial-scale ( 倍率の初期値 )
0 から 10 が指定可能。
user-scalable ( ユーザーによる拡大縮小の許可 )
yes または no が指定可能。
デフォルトは yes

サンプルコード

次のコードだと、拡大・縮小できない実寸表示となります。
※ 分かりやすいように一部改行を入れています。

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta
            content="
                width=device-width,
                initial-scale=1.0,
                minimum-scale=1.0,
                maximum-scale=1.0,
                user-scalable=no
            ">
        <title></title>
        <style>
        body {
            margin: 0;
            padding: 0;
        }
        div {
            background-color: #CCC;
            width: 320px;
        }
        </style>
    </head>
    <body>
        <div>320px</div>
    </body>
</html>