@ RWD

Viewport:ビューポート

Viewport は、スマートフォンで Web サイトを表示する際の仮想的なウィンドウサイズといえる機能で、初期値は横幅 980px に設定されています。つまり、PC でブラウザーを横幅 980px にして見た状態がスマートフォンの小さな画面に表示されることになります。

このため、デフォルトの状態でコーディングしただけでは、スマートフォンで見ると文字や画像がかなり小さく表示されてしまいます。

Viewport でスマートフォン、タブレットで表示する際のサイトの見え方を指定することによって。 ウェブページを適切なサイズで表示してくれるようになります。 記述は HTML のに meta 要素として追加します。

viewport メタタグを指定してスマホ表示に

viewport メタタグは Apple が IOS Safari 向けに実装した拡張仕様で、Android でもサポートされているため、実質的には「標準」の仕様になっています。

format

<meta name="viewport" content="width=device-width, initial-scale=1">

viewport設定をしたページ

viewport設定をしていないページ