スマホでだけレスポンシブが効かない場合の原因と対処法

2023/3/20

原因

metaタグが設定されていない場合、スマートフォンでの表示が正常に行われないことがあります。metaタグは、ブラウザにページの表示方法を指示するためのものであり、以下のように設定する必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

このmetaタグは、画面の幅をデバイスの幅に合わせ、初期表示時の拡大率を1倍に設定するものです。つまり、metaタグが設定されていない場合、スマホでの表示が崩れたり、文字や画像が拡大されたりすることがあります。

したがって、metaタグは必ず設定することが望ましいです。設定する際には、上記のようにwidth=device-widthとinitial-scale=1.0を指定することが一般的です。