2011年7月26日火曜日

metaタグのviewportでスマホ向けサイトのサイズを制御する

viewportというのは仮想的なウインドウサイズで、iPhoneではデフォルト980pxになります。
(iPhoneの実際の画面サイズは320px×480px)
Media Queriesでデバイスに合わせてスタイルを振り分けるようにしてもviewportの980pxというサイズが邪魔してうまく振り分けてくれません。
そこで自分のサイトにあったサイズをviewportで指定していきます。

viewportの各プロパティ
width
デバイスの横幅。デフォルトは980px。200pxから10000pxまで指定可能。
デバイスの横幅に合わせる場合はdevice-widthを指定。
height
デバイスの縦幅。233pxから10000pxまで指定可能。
デバイスの縦幅に合わせる場合はdevice-heightを指定。
initial-scale
最初にページが読み込まれた際の拡大率。デフォルトは1。0から10まで指定可能。
(ただしminimum-scaleとmaximum-scaleの範囲に準ずる)
minimum-scale
最小の拡大率。デフォルトは0.25。0~10まで指定可能。
maximum-scale
最大の拡大率。デフォルトは1.6。0~10まで指定可能。
user-scalable
拡大・縮小の許可。デフォルトはyes。yes/noで指定。
各プロパティはカンマ(,)で区切ります。

【例】横幅はデバイスの横幅、拡大縮小は拒否の場合
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />

縦向きから横向きに変えたときに100%で指定している要素とかが横にのびる(横スクロールがでる)場合があります。これはmaximum-scaleのデフォルト値が1.6になっているからっぽい??
横向きに変えたときでも画面にフィットさせたい場合は、maximum-scale=1を指定することでフィットしますが、拡大できなくなってしまうので注意が必要です。


0 件のコメント:

コメントを投稿