ビューポート(viewport)を設定する(レスポンシブ化その1)

ビューポート(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">