マルチデバイス対応に必要なviewportの設定

マルチデバイスに対応したHTMLを作成するには viewport の設定が必要です。設定しておかないと、スマホで表示したときに小さく表示されたりします。

次のように記述しておけば大体の場合に対応することができます。基本的には head 要素の中に記述します。


それぞれの属性の意味を説明します。

端末の幅を設定する

content="width=device-width

この設定は端末の大きさに従うという意味です。

スケールの初期値

initial-scale=1.0"

1.0がデフォルトのスケールです。

全体

HTML全体ではこのようになります。