ビューポートについてのメモ書き。
■ 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様のお告げですので使用しません。
「最小および最大ズームを設定したり、ビューポートをズームする機能を完全に無効にしたりできます。これらのオプションはアクセシビリティに悪影響を与えるため、通常は避けてください。」だそうです。
レスポンシブ ウェブ デザインの基本 | Articles | web.dev
ユーザーが閲覧するデバイスのニーズと機能に応じたサイトを作成する方法。
web.dev
確認用のページを作ってみました。
https://linkgear.jp/test/viewport.html
コメント