WebページをPCの感覚で製作し、表示すると、上手く表示されない事が多いです。
コレはViewportを設定する事で解決します。
簡単に書くと
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
とmeta要素に指定することで、ちゃんと表示されるはずです。
詳しく値を見ていくと
<meta name=”viewport” content=”width=【横幅】, initial-scale=【初期の倍率】, maximum-scale=【拡大可能な最大の倍率】”>
- ・横幅
- 画面の横幅をピクセル単位で指定します。ただし、スマートフォンの場合は機種によって画面の横幅がまちまちで、本体の向き（縦方向・横方向）に よっても違いがあるので、通常は「device-width」という特殊な値を設定するとよいでしょう。device-widthを指定すると、端末の横 幅で自動的に調整されます。
- ・初期の倍率
- 表示した時の画面の倍率を指定します。たとえば「1」を指定すると1倍、「2」を指定すると2倍になります。
- ・拡大可能な最大の倍率
- スマートフォンは2本指でピンチ（iPhone）したり、拡大ボタンをタップ（Android）したりすることで画面を拡大できます。この時の最大の倍率を指定します。「1」を指定すると拡大できなくなり、横に向けた際、文字の大きさをそのままに行数が増えるという表示なります。