スマホを横画面にすると崩れます。

Question

レスポンシブのサイトを作成しました。

PC、スマホ共に問題ないように見えたのですが、スマホを横向きに回転すると崩れるというか、PCの表示で見切れているという感じになります。ピタッと納めたいのですが検索しても全くわからず困っています…。

viewportは入っています。
Max-width641 min-width640で作成しています。

よろしくお願い致します。

Answer 1

PCで、ブラウザの幅をPCサイズ (1200pxなど) からゆっくりと狭めていったときに、
「PCの表示で見切れている」ような崩れは生じますか?

もしもスマホを横画面にしたときの崩れと同じ崩れ方をしているのであれば、「スマホだから崩れている」のではなく、その画面幅 (おそらく750〜1000pxあたり) の「レスポンシブ対応が不十分」であることが表示崩れの原因です。
PCで崩れを無くすと、スマホでも崩れはなくなると考えられます。

---

CSS解像度について、最近のスマホの長辺のサイズは768pxを超えるものもあります。
iPhone X: 375x812
iPhone XS Max: 414x896

なのでブレークポイントの設定を、例えば769px以上はPC扱いなどというようにしているのであれば
769px〜1000px付近で表示崩れが起こるのは自然です。

BootstrapなどCSSフレームワークや、JavaScriptのプラグインなども含め、
そのような記述をしているものがないかメディアクエリ (@media) を探してみてもいいかもしれません。

Answer 2

メディアクエリを細かく設定すればいいと思います。

・
・
・
@media ( min-width : 768px ) {
}

@media ( min-width : 1024px ) {
}
・
・
・

Answer 3

答えは rjunakc さんが示されていますが、２点気になりました。

1. 分割数（rjunakc さんの回答どおり）
2. しきい値

---

横幅で区切るなら、以下の現行デバイスの情報を調べて検討されてはどうでしょう。
スマホやタブレットは ディベロッパーコンソールのレスポンシブ確認画面に表れる数字も参考になります。

• スマホ ポートレイト（縦）
• スマホ ランドスケープ（横）
• タブレット ポートレイト（縦）
• タブレット ランドスケープ（横）
• PC 画面サイズ（FHD/4Kなど）

Max-width641 min-width640

横幅 640 〜 641 の時点で CSS が意図しない値になりかねません。

例） 640未満、640以上 の２つに切り分ける場合

/*
   0          640(min)
   |--------->|---------   [screen width]
             :
             639(max)
 */
@media screen and (max-width:639px) {

}
@media screen and (min-width:640px) {

}