Web技術の基礎
スマートフォンにも対応するレスポンシブデザインのページで、<head>に <meta name="viewport" content="width=device-width, initial-scale=1"> を書く主な目的はどれか。
- Aページを配置する幅を端末の画面の幅に合わせ、縮小せずに表示させるため
- B画像を端末の画面の解像度に合わせて、サーバで自動的に作り直させるため
- Cパソコンのブラウザだけで表示させ、スマートフォンからのアクセスを断るため
答えと解説を見る
正解：A. ページを配置する幅を端末の画面の幅に合わせ、縮小せずに表示させるため
この指定がないと、スマートフォンのブラウザは、パソコン向けのページを想定した広い幅(一般に980px程度)でページを配置してから、画面に収まるように縮小して表示します。width=device-width で配置の幅を端末の画面の幅に合わせ、initial-scale=1 で最初の倍率を等倍にします。そのうえで、CSSのメディアクエリ(例えば @media (max-width: 600px))で、画面の幅に応じて配置や文字の大きさを切り替えます。
- A. 正しい。配置の幅を画面の幅に合わせ、縮小しない倍率で表示させます。
- B. 画面に合った画像を選ばせるには、img要素の srcset 属性などを使います。viewport の指定はサーバに画像を作らせるものではありません。
- C. viewport の指定は表示の幅と倍率を決めるもので、アクセスを断る働きはありません。