【PWA】iPhoneのホームバー干渉を防ぐための対策方法

2024年10月22日2025年2月8日

記事内に広告が含まれています。

PWAアプリの要素が、iPhoneのホームバーに干渉してしまう。どうすればいいの？

PWA化を行うことでWebサイトがネイティブのような見た目になりますが、問題となるのがiPhoneやiPadのホームバーとの干渉です。

特にボトムナビゲーションを実装しているアプリでは、ホームバーとボトムナビゲーションが干渉してしまい、ボタンが押しにくくなるといったUIの問題が発生することがあります。

この記事ではその対策方法について紹介します。

対策方法

フッターが、ホームバーに干渉していると想定します。

<footer>
  <p>これはフッターです</p>
</footer>

この場合、footer にホームバー分の padding-bottom を設定します。Appleデバイスでホームバーがあるときのみ、パディングを付与する方法です。

まず、<head> タグ内の viewport を次のように書き換えます。

<meta name='viewport' content='initial-scale=1, viewport-fit=cover' />

次に、CSSで padding-bottom を以下のように設定します。

<footer>
  <p>これはフッターです</p>
</footer>

<style>
  footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

この記述により、Appleのホームバーがあるデバイスでは自動的に padding-bottom が追加され、干渉が防げます。

さらにパディングを追加したい場合は、以下のように + を使って追加の幅を指定することもできます。

footer {
  padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
}

これでホームバーとの干渉を防ぐことができ、UIの問題が解決します。

ここまで、PWAアプリにおけるAppleデバイスのホームバー干渉を避ける方法について紹介しました。

この対策は、PWAアプリにはほぼ必須だと思います。ぜひ参考にして実装してみてください。

ここまでお読みいただき、ありがとうございました。

フォローする

応援する

もしこの記事が役に立ったなら、
こちらから ☕ を一杯支援いただけると喜びます

ブログ運営者

あらた

カテゴリー

タグ

アーカイブ

おすすめの投稿