【スマホサイト】viewport(ビューポート)を指定してスマホサイトに対応する

スマートフォン・タブレットには、iPhone/iPadなどのiOS端末や様々なAndroid端末が存在し、それぞれ異なった解像度を持つ。
WEBページ制作者は、それぞれ異なった解像度を持ったデバイスに対応する必要がある

スマートフォンに適した表示をするために「viewport(ビューポート)」を設定する。

viewportはWEBページに設定する仮想的な画面幅で、viewportの設定値により仮想的な画面幅を指定する事ができる。

iPhoneでは何もしなければ横幅980pxでWEBページが表示される。

デフォルトのviewport設定はデバイス・ブラウザによって異なるので、WEBページの<head>タグ内にviewportを<meta>タグに記述して上書きする

<meta name="viewport" content="パラメーター=値">

【viewportのパラメーターと値】

■width
値 : 任意のピクセル
デフォルト値 : 980px
範囲 : 200~10000px
または、device-width(デバイスの横幅に合わせる)
■height
値 : 任意のピクセル
デフォルト値 : widthの値とデバイスのアスペクト比から自動算出
範囲 : 233~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

【viewport指定例】

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

デバイスの画面幅いっぱいをviewportの幅にしたい場合は”width”の値に”device-width”を指定する。

ズームの範囲は”minimum-scale”と”maximum-scale”の範囲内に制限される。

画面を拡大縮小させたくない場合は”user-scalable”の値に”no”を指定する。

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>