viewport

viewportのパラメータ記述

注意事項
　　widthの初期値は、ブラウザにより異なる場合がある
　　複数のプロパティを指定する場合は、カンマ（, ）で区切る

表示領域設定の必要性
　　デフォルトの状態では、幅980pxの領域にWebページが表示される
　　スマートフォン向けに作られたページ（一般的には幅320px）では、無駄に小さく表示されて横幅が余る
　　　　可変幅にしている場合は横に伸びてしまう

　　スマートフォン向けに最適化したい場合
　　　　meta要素（viewport）を使って表示領域を設定する
　　　　　　領域の幅やズーム倍率を調整することで、スマートフォンに適した大きさで表示される様になる

widthプロパティについて
　　領域の幅を設定する
　　デフォルトの幅は９８０、範囲は２００～１０，０００
　　値にはピクセル数、または【device-width】を指定する
　　　　meta name=”viewport” content=”width=320″
　　　　meta name=”viewport” content=”width=device-width”
　　　　　　【device-width】を指定した場合は、初期のズーム倍率が1 になる
　　　　　　【initial-scale】で変更することも可能

heightプロパティについて
　　領域の高さを設定する
　　デフォルトの高さは、【width】と縦横比から計算され、範囲は２２３～１０，０００

initial-scaleプロパティについて
　　初期のズーム倍率を設定する
　　１．５を指定した場合は１．５倍に拡大、０．５を指定した場合は半分に縮小して表示する
　　　　meta name=”viewport” content=”initial-scale=1.5″

minimum-scale と maximum-scaleプロパティについて
　　ユーザーがズームできる範囲を指定する（どちらかのみを指定することも可能）
　　　　minimum-scale … 最小倍率
　　　　maximum-scale … 最大倍率
　　　　　　以下の例だと、0.5倍～2倍の範囲でズームが可能となる
　　　　　　meta name=”viewport” content=”minimum-scale=0.5, maximum-scale=2″

user-scalableプロパティについて
　　ズーム操作を許可するかどうかを指定する
　　noを指定すると、ズームの操作が無効になる
　　　　meta name=”viewport” content=”width=device-width, user-scalable=no”
　　あわせて CSS に次のように指定しておく。
　　　　body {
　　　　　　　　-webkit-text-size-adjust: 100%;
　　　　　　　}