ビューポート(viewport)を設定する(レスポンシブ化その1)
ビューポート(viewport)とは
スマホやタブレットなどのモバイル端末で最適に表示させる(=レスポンシブwebデザイン)ため HTMLファイルのheadタグ内に記述します(meta要素のname属性値)。
Google推進ビューポート記載例
<meta name="viewport" content="width=device-width, initial-scale=1">
meta name=”viewport”
width=device-width
デバイス幅に合わせて表示させる設定。 width=320などの固定幅で設定する方法はGoogle非推奨だそうです。
user-scalable
ユーザーが拡大・縮小できるかどうかの設定。
initial-scale
初期のズーム倍率。 1より小さい数字は使わない。
minimum-scale
最小倍率の設定。 デフォルトは 0.25 で指定可能範囲は0〜10までの値。 width=device-widthにしたときは記載しない。
maximum-scale
最大倍率の設定。 デフォルトは 1.6 で指定可能範囲は0〜10までの値。
上記より優先される。
簡単そうですが色んな端末があるので複雑なようです。結局、私はよくわからないので、今のところGoogle推進どおりにしています。
以下、自分用メモ。
<meta name="viewport" content="width=device-width, initial-scale=1">