スマホを横向きにすると崩れるときの原因と対処

横向きで崩れる根本の原因

スマホを横向きにすると、幅が広がる代わりに高さが極端に低くなります。縦向きを前提に「画面いっぱい」の高さで作った要素は、横向きでは画面に収まりきらず、肝心の内容がスクロールしないと見えない、という事態が起こります。

とくにファーストビューを高さ100vhで作っていると、横向きでは縦の余白がほとんどなくなり、見出しやボタンが押し出されます。横向きは幅だけでなく高さの制約が厳しい、という前提を持つことが対処の出発点です。

vh単位とアドレスバーの落とし穴

高さの指定にvhを使うと、横向きで内容があふれやすくなります。さらにモバイルブラウザではアドレスバーの表示・非表示でビューポート高が変わり、100vhが実際の見える高さと一致しないことがあります。

対処として、横向きや小さい高さでは100vhを使わず、min-heightで最低限の高さだけ確保し、内容に応じて伸びるようにします。新しい単位のdvh（動的ビューポート高）を使うと、アドレスバーの変化に追従しやすくなります。要素を縦に詰め込みすぎないことも大切です。

症状別チェック表

スマホを横向きにすると崩れるときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

orientationで横向き専用の調整を入れる

横向きだけ調整したい場合は、メディアクエリのorientation: landscapeで横向き専用のスタイルを書けます。たとえばファーストビューの高さをautoにする、固定ヘッダーを薄くする、要素を横並びにして縦の高さを節約する、といった調整が有効です。

また、高さが低い環境向けに、min-heightや高さ条件のメディアクエリを併用すると、横向きの小型端末でも内容が収まりやすくなります。横向きを禁止して縦向きを強制するのは、使い勝手やアクセシビリティを損なうため、できれば横向きでも見られるように作るのが望ましいです。

横向きの崩れを直す手順

次の順で確認すると、横向きの崩れを抑えられます。

1. 実機やエミュレーションでスマホを横向きにし、あふれる要素を特定する
2. 高さ100vhを使っている箇所をmin-heightやdvhに見直す
3. orientation: landscapeで横向き専用の調整を加える
4. 固定ヘッダーやフッターが高さを取りすぎていないか確認し、薄くする
5. 要素を横並びにするなど、縦方向のスペースを節約する
6. 横向きでスクロールせずに主要な内容が見えるか実機で確認する

縦横両方の見え方を実機共有で確認する

横向きの崩れは、デスクトップのブラウザでは再現しづらく、実際にスマホを回転させてみないと気づきにくい種類の問題です。複数機種の実機で、縦横を切り替えながら確認するのが確実です。

修正版を関係者に見てもらうなら、ギガサイト便にHTMLやZIPをドロップして共有URLを発行すると、各自が自分のスマホで縦横を切り替えて確認できます。QRコードを配れば手元の端末ですぐ開けて回転を試せます。同じURLのまま中身を差し替えられるので、調整のたびに最新版を見てもらえ、一時公開ページにはnoindexが付いて検索結果に出ません。