PWA化を行うことで、アプリがネイティブのような見た目になりますが、問題となるのが、iPhoneやiPadのホームバーとの干渉です。
特に、ボトムナビゲーションを実装しているアプリでは、ホームバーとボトムナビゲーションが干渉してしまい、ボタンが押しにくくなるといったUIの問題が発生することがあります。
この記事では、その対策方法について紹介します。
【PWA】iPhoneのホームバー干渉を防ぐための対策方法
2024年10月22日
記事内に広告が含まれています。
PWAアプリの要素が、iPhoneのホームバーに干渉してしまう。どうすればいいの？
対策方法
フッターが、ホームバーに干渉していると想定します。
<footer>
<p>これはフッターです</p>
</footer>この場合、footer にホームバー分の padding-bottom を設定します。Appleデバイスでホームバーがあるときのみ、パディングを付与する方法です。
Viewportの記述
まず、<head> タグ内の viewport を次のように書き換えます。
<meta name='viewport' content='initial-scale=1, viewport-fit=cover' />CSSの記述
次に、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アプリにはほぼ必須だと思います。ぜひ参考にして実装してみてください。
ここまでお読みいただき、ありがとうございました。
関連記事
シェアする
キーワードで探す
ブログ運営者
あらた
- 21歳
- 千葉県在住
- 文系大学生｜26卒
- 経営学部 マーケティング学科
- Webエンジニアインターンに参加中
- インターン：Vue.js, Laravel
- 個人開発：React, Next.js, PHP
お知らせ
ダークモードに対応しました。画面右上から切り替えることができます。 2024年11月7日 |
Android版アプリ「リアル大学生：モバイル」がリリースされました。 2024年9月30日 |
RSSの不具合を修正しました。お手数ですが、新しいURLから再登録をお願いします。 2024年9月30日 |
iOS版アプリ「リアル大学生：モバイル」がリリースされました。 2024年8月3日 |
