[HTML]スマホサイトでお世話になる <meta name=”viewport”> の設定のまとめ｜HTML｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[HTML]スマホサイトでお世話になる <meta name=”viewport”> の設定のまとめ

スポンサード

meta viewport は、デバイスに応じてウィンドウの幅や高さを調整できたり、画面を拡大縮小率を調整したりと、表示領域を設定する上で重要なメタデータです。

特に、スマートホンやiPad などのタブレット向けにサイトを構築したり最適化する際に、<head> 内に meta viewport を設定しておかないと上手く収まってくれません。

meta viewport の記述例

以下のように <head> 内に指定します。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

meta viewport の属性

content に指定する値はサイトに応じて調整します。

width	ピクセルで指定。初期値は 980px。 `device-width` で、デバイスの横幅に合わせる。
height	ピクセルで指定。初期値は auto。 `device-height`で、デバイスの高さに合わせる。
initial-scale	ページ読み込み時の拡大率の指定。初期値は 1。
minimum-scale	拡大率の最小値。初期値は 0.25。
maximum-scale	拡大率の最大値。初期値は 1 .6。
user-scalable	拡大操作（ピンチイン/ピンチアウト）の許可。初期値は yes。拡大操作を許可しない場合は no。