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

属性の説明 ———————————————————————-

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

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

サンプルコード ———————————————————————-

次のコードだと、拡大・縮小できない実寸表示となります。

※ 分かりやすいように一部改行を入れています。

<html lang="ja"><head>
        <meta charset="UTF-8">
        <meta name="viewport" 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>

上記コードのサンプルページ

参考にさせてもらったページ ———————————————————————-

スマートフォン向けサイトの作り方|ユージック

ありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です