スマホでのviewportの設定についてです。
スマホサイトで拡大をさせないようにしたり、
横にしたときに、レイアウトを変えないようにします。
| パラメータ | 内容 | 初期値 | 値 |
|---|---|---|---|
| width | 可視領域の横幅 | 980px | 200pxから10000pxまでの範囲を指定 又は device-width （デバイスの横幅） |
| height | 可視領域の高さ | 自動 | 233pxから10000pxまでの範囲を指定 又は device-height （デバイスの縦幅） |
| initial-scale | 初期拡大率 | 1 | minimum-scaleからmaximum-scaleによって定義された範囲の値を指定 |
| minimum-scale | 拡大率の最小scale値 | 0.25 | 0 から10.0までの範囲を指定 |
| maximum-scale | 拡大率の最大scale値 | 1.6 | 0から10.0 までの範囲を指定 |
| user-scalable | ズーム操作を許可するかどうか | yes | yesかno/0で指定 |
値を設定しない場合は初期値になります。
基本的に、以下の指定でよさそうです。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
やっていることは、
width=device-width : 横幅をデバイスの幅に指定
initial-scale=1.0 : 初期拡大率を1にする
minimum-scale=1.0 : 拡大率の最小scale値を1にする
maximum-scale=1.0 : 拡大率の最大scale値を1にする
user-scalable=0 : 拡大操作をさせない
こんなかんじ
■参考
▽コンテンツ内容に合わせて viewportを最適化
http://www.mdn.co.jp/di/articles/2434/?page=8
▽スマートフォン(iphone、Xperia、GALAXY等)のviewportの最適な指定方法とは？ – 画面サイズ（画面解像度）の一覧も
http://html5-css3.jp/smartphone/iphone-xperia-galaxy-viewport.html
