PCでは正常なのにスマホだけ表示が崩れる原因
PCでは問題ないのに、スマホで見ると表示が崩れてしまう――そんなお悩みをよくいただきます。多くの場合、サイト全体が壊れているのではなく、画面幅が狭くなったときの見え方に対応できていないことが原因です。原因1:横幅が固定されている画像・表・ボタンなどに固定の横幅が指定されていると、スマホの狭い画面に収まらず、横にはみ出してしまうことがあります。PCでは横幅に余裕があるため問題になりませんが、スマホで見たときだけ崩れて見えるケースです。原因2:画像やボタンのサイズがスマホ向けになっていないPC表示を前提に作られた画像やボタンは、スマホでは大きすぎたり、位置がずれたりすることがあります。特に、後から画像やバナーを追加したページでは、このような崩れが起きやすい傾向があります。原因3:スマホ用の並び方が指定されていないPCでは横並びで表示している要素も、スマホでは縦並びにした方が見やすい場合があります。この切り替えが設定されていないと、文字が詰まったり、ボタンが押しにくくなったりします。まとめ・ご相談の際に教えていただけると助かること原因を確認する際は、以下の情報があるとスムーズです。・崩れているページのURL・スマホ画面のスクリーンショット・どの部分が崩れているかの説明また、最近テキストや画像を追加した、テーマやプラグインを更新したといった変更があれば、それがきっかけになっているケースもあります。表示崩れは、1か所だけ修正したつもりでも、別の画面幅や別のページに影響が出ることがあります。原因が分からないままCSSを追加し続けると、後から直しにくくなることもあるため、早めの対処がおすすめ
0