【スマホ】PCサイトをスマホで見たら崩れる場合の対処法

PCサイトをスマートフォンで見ると、デザインが崩れる場合があります。

横幅が切れていたり、背景画像が崩れていた時の対処法をメモしておきます。

横幅が切れる、背景画像が崩れる時

bodyにmin-widthを追加、PCの横幅以上を指定

横が切れる、画面ピッタリにならない時

どこかの要素にmin-heightを追加、スマホの比率に合わせて高さを設定
(機種毎に異なるので、基準スマホで設定)
→こちらに関してはもっと良い方法を探したいところです。

2015/05/07追記

大量の「空白スペース」で崩れる

お客様で更新されているサイトで、横幅がピッタリにならない時がありました。
色々な要素をdisplay:noneにしても解決できず、なにかと悩んでいると、
お客様が大量の空白スペースを1行に入力されており、それを削除すると解決できました。

あまりないケースだと思いますが、ないが故に非常に悩みました。
今後のためにメモを追記しておきます。

コメント

タイトルとURLをコピーしました