【HTML】レスポンシブにならない時の対処法

HTMLのコーディングをしていて、いざブラウザの開発者ツールでスマホ時の画面を確認しようと思ったとき、

なぜかレスポンシブになっていない、ならない事はあるでしょうか？

そういった場合はheadタグ内に下記のコードを入れているか確認しましょう。

<meta name="viewport" content="width=device-width,initial-scale=1">

これを入れればちゃんとスマホサイズで画面がフィットして表示されるはずです。

細かい説明

ここからは上記のコードの細かい説明です。興味があれば読んでください。

<meta name="viewport" content="width=device-width,initial-scale=1">

↑のコードは、ビューポートのメタタグで、ウェブページがモバイルデバイス（スマートフォンやタブレットなど）においてどのように表示されるかを制御するものです。

ビューポートとは、ウェブページの可視範囲の幅の事です。

上記のコードはおまじないみたいなもので、デバイスの幅をビューポートの幅にしますよ。という意味です。

これによってスマホだろうがPCだろうがデバイスの幅を自動で感知して最大幅を認識し、ユーザーがズームイン、ズームアウトしたりしなくていいようになってます。

以上です！

▼HTML&CSSのおすすめ書籍▼