パソコンのブラウザで幅を狭めていくと、ページがレスポンシブ対応されているのに、スマホで表示させるとページが小さく表示されてしまう。ここでは、そんな現象が起きた場合の対処法についてお話します。ちなみに、この内容はメディアクエリのことをある程度、理解されている方が対象です。
メディアクエリのことが分からない方ははじめに下記をご覧ください。
スマホでメディアクエリが効かないときの対処法
結論からお話すると、head要素に下記のメタタグを入れると解決します。
HTML
<meta name="viewport" content="width=device-width">
解決法は以上です。とても簡単でしたね。
ここから先は上記のメタタグの説明になります。
viewportとは
「viewport」というのは、ページを表示させる仮想の表示領域のことです。先ほどの、content="width=device-width"というのは、「表示領域の横幅を端末の横幅に合わせる」という意味になります。ページをスマホ対応させたいときは、はじめにこのメタタグを設定する必要があります。
viewportで指定できるもの
以下は<meta name="viewport" content="・・・" >の中で指定できるプロパティ（？）と値の表です。
| 指定できるもの | 意味 | 初期値 | 指定範囲 |
|---|---|---|---|
| width | 横幅 | 980px | 200px～10000px, device-width |
| height | 高さ | 横幅とのアスペスト比から計算される値 | 200px～10000px, device-width |
| initial-scale | 初期のズーム倍率 | 1 | |
| minimum-scale | 最小倍率 | 0.25 | 0～10 |
| maximum-scale | 最大倍率 | 1.6 | 0～10 |
| user-scalable | ズームの操作 | yes | yes, no |
先ほどの設定はwidthのみでしたが、上記のプロパティを複数指定したいときは、<meta name="viewport" content="・・・" >のcontent="・・・"の中にカンマ区切り「,」で指定していきます。
<meta name="viewport" content="width=device-width,initial-scale=1">
すべてを理解する必要はありませんが、今後、レスポンシブで不具合が起きたときはviewportの指定が原因でないかも疑ってみて下さい。
