iPhoneでPWAアプリの画面下部の余白を解消する方法

PWAアプリをiPhoneに追加した際に、画面下部にアドレスバー相当の余白が生まれる問題は、iOS特有の表示仕様によるものです。この余白を解消するには、CSSとHTMLの設定を工夫する必要があります。

viewportとCSSの設定

まず、<meta name="viewport">でheight=device-heightを設定します。また、CSSでbodyやhtmlの高さを100%に設定することが重要です。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

safe-area-insetの活用

iPhone X以降では、ノッチやホームインジケータによる余白があるため、CSSでenv(safe-area-inset-bottom)を利用します。これにより、コンテンツが余白に被らず、余白自体を有効活用できます。

body {
  padding-bottom: env(safe-area-inset-bottom);
}

フルスクリーン表示の確認

manifest.jsonでdisplayをstandaloneに設定しているか確認してください。これにより、アドレスバーを含むブラウザUIが表示されず、より自然なフルスクリーン表示になります。

{
  "name": "My PWA",
  "short_name": "PWA",
  "display": "standalone",
  "start_url": "/index.html"
}

まとめ

iPhoneでPWAをフルスクリーン表示するには、viewport設定、safe-area-insetの活用、manifest.jsonのdisplay設定を組み合わせることで、下部の余白を最小化できます。これらの調整で、ホーム画面に追加したPWAがより自然に表示されるようになります。