viewport設定で、スマホに小さく表示されてしまう現象を解消!

PCでは正常に表示されるのに、スマホで見たら文字が小さくて読めない!なんて現象にあったことはありませんか?
ここではそうならないための対処法をご紹介します☆

目次

  1. スマホで小さく表示されてしまう原因
  2. [解決方法]viewportにwidth=device-widthを設定する
  3. viewportで拡大の設定

スマホで小さく表示されてしまう原因


スマホの横幅は、デバイスによりますが大体320px~420pxです。
一般的なwebサイトは900px以上で作られるため、スマホのブラウザでは擬似的に画面サイズを980pxにして、それを実際の画面の中に納めます。
980pxのものを320pxの中に表示するので、縮小されて表示されてしまうわけです。

[解決方法]viewportにwidth=device-widthを設定する

それなら擬似的に画面サイズを980pxにするのをやめてしまおう!実際の横幅に合わせてよね!
というのが、この方法です。

<head>
<meta name="viewport" content="width=device-width">
</head>


viewportというのが擬似的な画面のサイズです。
content属性には、width=device-widthの他に200px~10000pxを入れることも可能です。

viewportで拡大の設定

viewportでは、他に拡大についての設定も行うことができます。
なお、複数の値を指定する場合には「,(カンマ)」で区切ります。

<meta name="viewport" content="width=device-width,initial-scale=no">
user-scale
ユーザに拡大縮小の操作を許可する

デフォルト
yes

指定できる値
yes/no

minimum-scale
縮小率の下限

デフォルト
0.25

指定できる値
0~10

maximum-scale
拡大率の上限

デフォルト
1.6

指定できる値
0~10

initial-scale
ページが読み込まれたときの拡大率

デフォルト
1

指定できる値
minimum-scale~maximum-scaleの範囲内

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です