viewport について

ビューポートについてのメモ書き。

■ width=device-width
width=device-widthは、そのデバイスを本来の向き(スマホの場合は縦)で使用した場合の幅に固定します。
例えばデバイスを縦にしたときの幅が320pxの場合、デバイスを横にした時の幅が480pxだとしても、縦の時の幅320pxを拡大して表示します。
Google様はinitial-scale=1.0と共に使用することを奨めています(content=”width=device-width,initial-scale=1.0″)。

■ initial-scale=1.0
initial-scaleは初期表示の拡縮率を指定した値を基にしてくれます。initial-scale=1.0 が標準となり1.0を大きい値にすれば拡大、小さい値にすれば縮小して表示します。
Google様はwidth=device-widthと共に使用することを奨めています(content=”width=device-width,initial-scale=1.0″)。

■ minimum-scale、maximum-scale、user-scalable の使用は避ける
Google様のお告げですので使用しません。
「最小および最大ズームを設定したり、ビューポートをズームする機能を完全に無効にしたりできます。これらのオプションはアクセシビリティに悪影響を与えるため、通常は避けてください。」だそうです。

https://developers.google.com/speed/docs/insights/ConfigureViewport?hl=ja

確認用のページを作ってみました。
http://linkgear.jp/test/viewport.html

コメントを残す

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