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

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

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

それぞれの属性の意味

端末の幅を設定する。
content=”width=device-width
この設定は端末の大きさに従うという意味。

スケールの初期値
initial-scale=1.0″
1.0がデフォルトのスケール。

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

Let's share SNS