PCサイトをスマートフォンで見ると、デザインが崩れる場合があります。
横幅が切れていたり、背景画像が崩れていた時の対処法をメモしておきます。
横幅が切れる、背景画像が崩れる時
bodyにmin-widthを追加、PCの横幅以上を指定
横が切れる、画面ピッタリにならない時
どこかの要素にmin-heightを追加、スマホの比率に合わせて高さを設定
(機種毎に異なるので、基準スマホで設定)
→こちらに関してはもっと良い方法を探したいところです。
2015/05/07追記
大量の「空白スペース」で崩れる
お客様で更新されているサイトで、横幅がピッタリにならない時がありました。
色々な要素をdisplay:noneにしても解決できず、なにかと悩んでいると、
お客様が大量の空白スペースを1行に入力されており、それを削除すると解決できました。
あまりないケースだと思いますが、ないが故に非常に悩みました。
今後のためにメモを追記しておきます。
コメント