レスポンシブでコーディングしたのになぜかスマホでうまく表示されない原因は？

レスポンシブでコーディングしてPCでのテストはうまくいったのになぜか、スマホで表示されない。

こういった経験はありませんか？

もしかしたらこの問題の解決方法は案外簡単かもしれません。

viewportをチェックしましょう！

レスポンシブコーディングをスマホでも対応させる場合、htmlのhead内にviewportを設置する必要があります。この設定がないと、スマートホンで正しく表示されません。

content内に「,」区切りで必要な指定をして、スマホ向けの表示を制御します。
それでは、content内に指定されたそれぞれの属性の役割をみてみましょう。

横幅を調整する

「width=device-width」は、デバイスの横幅を取得する記述です。
この記述をすることで、サイトの横幅がデバイスの横幅に合った形で表示されるようになります。

倍率を調整する

「initial-scale=1」は表示する倍率が１倍であることを意味します。通常、レスポンシブコーディングの場合倍率を大きくしたり、小さくしたりする必要はないので、ここは特に理由のないかぎり１倍で設定します。

まとめ

このように、レスポンシブサイトの表示がうまくいかない場合、viewportの設定の有無が原因の場合がよくあります。

「これは知らなかったという方」もいれば、「うっかり忘れてた！」という方もいるのではないでしょうか？

こういた「うっかり」は私もよくあるので自分自身への対策の意味も含めて、ベースに使えるhtml最新版！レスポンシブコーディングの場合という記事を掲載しています。

これをコピペすれば、レスポンシブコーディングの基本がもれなく入っているという「htmlのテンプレート」になっております。よろしければこちらも併せててチェックしてみてください！

PS.
レスポンシブと言えば、ブレークポイントをどこにするかという問題があると思います。
そこで、最新版、レスポンシブデザインのブレークポイントはこれ！
という記事も用意しております。こちらもぜひ！