Bootstrapやメディアクエリでレスポンシブデザインが反映されない場合の対処方法
スポンサーリンク
Bootstrapを利用していたりメディアクエリを利用して、端末サイズに応じたレスポンシブなデザインにされている人が多いと思います。
先日、Bootstrapでデバイスのサイズに応じたデザインにしていましたが、想定とは異なるデザインになってしまうことがありました。
パソコンだと想定していたデザインになるのですが、スマホでは予期しないレイアウトになってしまうというものでした。
どんなレイアウトかというと、パソコンで表示されている画面をそのまま縮小してスマホに表示されるというものでした。
想定したレスポンシブなデザインにならない原因
画面が表示される際、ブラウザ側で「デバイスの画面サイズがわからない」、または、「どの程度縮小拡大していいかわからない」ために 想定したデザインで表示ないのだと思います。
デバイスの画面サイズに応じてレイアウトを正しく設定する方法
ページが表示される表示領域の設定は、HTML上のmeta要素にviewportを設定してあげればよいです。
viewportを指定することにより、ブラウザ側がページを表示する際に「表示領域のサイズはいくつか」、「表示する際の拡大率・縮小率はいくつか」がわかるようになります。
以下に設定例を紹介したいと思います。
Bootstrap 4を利用する際の初期設定方法にもしっかりこのmeta要素の設定について書かれているので、 その設定を漏らしてしまっている人は今回紹介しているような「想定したレスポンシブレイアウトにならない」といったケースに遭遇しているかもしれません。
なお、以下の記事で最新版のBootstrapの導入方法もわかるので良かったら見てみてください。
はてなブログの方はこちらもどうぞ。
おわりに
レスポンシブデザインにするには、meta要素にviewportの設定が必要なことを紹介しました。
最近のウェブサイトはモバイル対応が必須だと思うのでviewportはしっかり理解しないとですね。
