このドキュメントは、Framerを学ぶ国内ユーザーが韓国語資料の不足で経験する困難を解決するため、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆さんに少しでもお役に立てれば幸いです。

なぜサイトがモバイルで画面いっぱいに表示されないのでしょうか?

Framerで制作したサイトがモバイル画面のBreakpointで画面いっぱいに表示されない場合、最も一般的な原因はページ内の要素の幅設定がビューポートより広いためです。この問題は幅の調整だけで簡単に解決することができます。

1. 問題の要素を見つける

まず、モバイル画面でサイトが横に溢れたり余白ができる部分を見つける必要があります。この設定は要素が小さい画面に合わせて適切に縮小されず、サイト全体が画面より広く表示される原因となります。

次のような設定がある要素が問題を起こすことが多いです。

• 反応型幅（例: Fill / 1frやRelative 100%）の代わりに、固定幅（例: Fixed / 460px）で設定された要素

• モバイル画面に対して、最大幅Max Widthの値が大きすぎる要素

2. 幅設定を修正する

問題となる要素を見つけたら、次のように幅設定を修正してください。

• 固定幅を相対単位に変更
  px単位の代わりに100%や1frに変更すれば、画面サイズに応じて自動で調整されます。

• 最大幅の調整
  モバイルビューポートより大きい値が設定されている場合は削除するか、適切な値に下げて修正してください。

3. 変更を適用し公開する

設定をすべて修正した後は、サイトを再度公開する必要があります。「Publish」ボタンを押して変更を適用してください。その後、モバイル画面でサイトが画面全体を均一に埋めることを確認できます。

上記のステップをすべて実行しても問題が解決しない場合は、問い合わせページを通じて追加のサポートを受けられます。

この文はFramer公式ブログの「Why is my site not filling the screen on the Phone breakpoint?」を翻訳およびアレンジしたコンテンツです。