レスポンシブデザインなのにスマホでPC版が表示されるわけ

vewp-00PCでもスマホでもワンソースでどちらにも最適な表示ができるレスポンシブデザイン。イチからレスポンシブデザインを作成するときにはまりがちな表示の問題について書いてみました。

 

せっかくスタイルシートを調整したのにスマホでPC版が表示される!?

メディアクエリを使い画面幅で読み込むスタイルを分岐するよう調整したにも関わらず、いざスマホで見てみるとPC版が表示されることがあります。

rpd01

これは解像度の高いデバイスで表示した場合に、そのデバイスで表示できる解像度に合わせられてしまうことが原因です。デバイスのブラウザサイズと解像度は異なるため、解像度の高いデバイスではPC版が表示されてしまいます。

スマホに最適化するなら「viewport」を設定しよう

スマホでスマホ表示をさせるには、ヘッダー内のmetaにviewportを指定して表示倍率を制御します。

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

viewportの設定ではcontent=””の中で表示の設定をしていきます。

width=device-width デバイスのブラウザサイズ表示
initial-scale=1 初期値は1倍で表示
maximum-scale=1 最大1倍で表示
width=device-widthとすることでスマホで見た場合はそのデバイスのブラウザサイズで表示する設定のため、メディアクエリで設定した分岐点によりスマホはスマホ表示をさせることができます。
(scaleの値は任意で設定します。上の例では常に倍率1倍のためピンチしても拡大されません)
rpd02

PC版だけで運用していると気づきにくい部分ですがレスポンシブデザインでは必須と言える設定なので忘れずに設定しましょう。