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

レスポンシブ ウェブデザインの基本  |  Web  |  Google Developers
ほとんどのウェブサイトは、マルチデバイス エクスペリエンスという観点で最適化されていません。モバイルやパソコンなど、さまざまな端末の画面上でサイトを適切に機能させるための基本情報について説明します。

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

コメント