[HTML,CSS]開発者ツールで見た時にレイアウトが崩れる問題を解決

前回記事ではoverflowを使わずに横スクロールを実現しましたが、その影響で開発者ツールや、iOS Safariで見ると、レイアウト崩れが起こっていた。

こんな感じ。

目次

viewportを指定する。

viewportを指定することで解決する。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>

これで、ブラウザ幅ぴったりに表示されるようになる。

initial-scale=1

これを追加しても、開発者ツール上ではレイアウト崩れは解消されない。なぜ入れるのか?

iOS Safariで、ブラウザ標準スケール時かつ、対象ページに画面遷移した時に、崩れるため、設定を追加する必要がある。

minimum-scale=1

iOS Safariで、ブラウザ標準スケール時かつ、対象ページに画面遷移後、ピンチインをすると、画面の最大幅で調整され、レイアウトが崩れるため、設定する。

Summary

viewportの考え方は、まだ整理し切れてない感じだ。
minimum-scaleを入れているが、ブラウザ標準の拡大縮小機能は使用できるので、利用時にそこまで大きなUX低下は招かないと思う。

よかったらシェアしてね!
目次