metaタグのname="viewport"についてまとめてみた

はじめに

レスポンシブデザインで作成したサイトをスマホで見てもうまくレイアウトが反映されておらず、その原因がmetaタグでviewportを指定していなかったから、というのを突き止めるのに一日かかってしまった。超悔しいのでまとめる。

参照元はこちら。
CSS Device Adaptation

そもそも

metaタグには name="viewport" としてこんな感じで値を設定できるが

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

これはcssのviewportに相当する。

@viewport {
  width: device-width;
}

width 属性、height 属性

• 1〜10000 までの数値(px) 、または device-width, device-height を指定

initial-scale、maximum-scale、minimum-scale 属性

• css の zoom プロパティに相当する
• 0.1〜10までの数値、または device-width, device-height を指定
• device-width, device-height は10と同じ
• 1がズームなし。10に近づくほどズームイン(画面いっぱい)、1より小さい値はズームアウト

user-scalable 属性

• css の user-zoom プロパティに相当する
• yes か no が設定できる。yes は zoom、no は fixed に相当する
• yes ならズーム許可、no なら不許可