スマホ表示の公開サイトやプレビューがデザインエディタと異なる場合

Studioでは、デフォルト・スモール・タブレット・モバイル・ミニの最大5つのブレイクポイントを設定できますが、その間の画面幅には、もっとも近いブレイクポイントのデザインが縮小されて表示されます。

このとき、縦幅や横幅を「px」などの固定値で指定したボックスがあると、縮小に対応できずに要素のはみ出しやレイアウト崩れが発生します。
サイズ単位を「px」だけでなく「%」「auto」「flex」などで指定すると、ブレイクポイント間の画面幅でも崩れにくいレイアウトになります。
​

サイズ単位の詳細は、ボックスのレイアウト：サイズ（幅・高さ）を設定するも参照してください。

ここでは、スマホ表示で崩れやすい実装パターンと、その対処方法を紹介します。

親ボックスの高さを「px」で固定していると、画面幅が狭くなったときに中身の要素を収めるだけの高さが足りず、テキストや画像が親ボックスからはみ出してしまう場合があります。（参考：レスポンシブ時に要素が見切れる・はみ出る・余白ができる場合）

親ボックスの高さには、特別な意図がない限り「auto」を使用することを推奨します。

「auto」を設定したボックスは、内包する要素のサイズに応じて高さが自動で調整されるため、意図せず要素がはみ出す状況を避けやすくなります。

幅についても同様で、基本的に「auto」や「%」を活用することで、画面幅の変化に応じてレイアウトが崩れにくくなります。

同じ階層に、幅を「px」で指定した画像ボックスと、「auto」で指定したテキストボックスを横並びで配置しているケースです。

画面幅が狭くなると、固定幅の画像の横にテキストが入りきらず、要素が親ボックスからはみ出してしまう可能性があります。

このような配置では、画像ボックスの横幅を「px」または「%」で指定し、テキストボックスを「1flex」で指定します。

「flex」を指定すると、同じ階層にある他の要素のサイズを基準に、残りのスペースをテキストボックスが自動で占有するようになります。

これにより画面幅が狭くなっても、テキストが親ボックスの中で折り返され、横方向にはみ出しにくくなります。

幅をすべて「px」で指定している場合、画面幅が変わっても要素のサイズは固定のままのため、ブレイクポイント間の画面幅で崩れが発生しやすくなります。

とくに複数カラムのレイアウトでは、画面幅に対して合計幅が収まらず、カラムがはみ出したり意図しない折り返しが発生することがあります。

幅を「%」で指定すると、親ボックスの幅に応じてサイズが自動調整されるため、ブレイクポイント間の画面幅でも崩れにくいレイアウトになります。

ブレイクポイントごとに「px」で値を上書きして調整するよりも、「%」や「auto」「flex」を組み合わせて相対的なレイアウトにしたほうが、少ない設定で幅広い画面サイズに対応できます。

スマホ表示で崩れがないか確認する際は、次のような点もあわせてチェックしてください。

これらを確認したうえで、デザインエディタ上のプレビューと「ライブプレビュー」の両方で動作を見ながら調整すると、実機での表示とのギャップを減らせます。