スマホでサイト表示が崩れる理由と対処法
Studioエディタ上でブレイクポイントを設定しているにも関わらず、スマホで閲覧すると表示が崩れてしまうという問題が発生することがあります。これは、閲覧デバイスの画面幅（解像度）の違いが原因ですが、実装方法を変更することで解決できます。
表示崩れの一因
Studioでは、最大5つのブレイクポイントを設定することが可能です。例えば、モバイルのブレイクポイントを540px、ミニを320pxに設定したサイトを390pxのスマートフォンで見た場合、指定したブレイクポイントのデザインはそのまま適用されず、モバイルのデザインが390pxの画面に収まるように表示されます。
ボックスの縦幅や横幅のサイズ単位を「%」「auto」「flex」などと指定することで、ブレイクポイント間の表示の崩れを防ぐことが可能です。
この記事では、問題が発生しやすい実装例とその解決策を具体的に紹介します。サイズ単位の詳細については、以下の記事をご参照ください。
レスポンシブ表示の確認方法
デザインエディタ上でスクリーンの幅を伸縮させると、ブレイクポイント間の画面幅での表示が簡単に確認できます。「ライブプレビュー」機能でのチェックと合わせてご活用ください。
よくある実装例と解消方法
実装例１
ボックスを内包する親ボックスの縦幅を「px」指定しているケースです。固定値での指定だと画面幅が狭くなると以下画像のように縦幅が足りなくなり、中の要素がはみ出てしまうことがあります。
改善方法
ボックスの縦幅は特別な意図がない限り「auto」の設定がオススメです。
「auto」を設定したボックスは、内包する要素のサイズに応じて幅が自動で調整されます。これにより、意図せず要素がはみ出す状況を回避できます。横幅についても同様で、基本的に「auto」を使用するとレイアウトが崩れにくくなります。
実装例２
同一階層に、「px」で横幅を指定した画像ボックスと「auto」で指定したテキストボックスを配置したケースです。この場合、画面幅が狭くなると内包されたボックスがはみ出す可能性があります。
改善方法
このような配置では、画像ボックスの横幅を「px」で指定し、テキストボックスを「1flex」で指定します。これにより、画面幅が狭くなった時でもテキストが親ボックスからはみ出さずに自動で折り返すようになります。
実装例３
「%」で横幅を指定すると、画面幅に応じて自動的にサイズが調整されます。これにより、ブレイクポイント間の画面幅でも自動でサイズが調整されます。またブレイクポイントごとに「px」で数値を上書きするよりも効率的な設定が可能になります。
この記事で解決しない疑問やがある場合は、エディタ右下の「？」からチャットサポートへお問い合わせください。