viewportの設定

Webデザイン

スマホでの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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です