はじめに
IphoneX以降、ホームボタンがなくなり、新しくホームバーが誕生した。
それにより、ホームバーとアプリ画面が被ってしまい操作しにくいことが起きている。
この現象は特にPWAを使用している際に生じる。
この問題を解決するのがセーフエリアである。
セーフエリアについて
セーフエリアとは、iphoneX以降のホームバーやカメラに対応して、アプリの表示を調節してくれる考え方のことである。
以下の記事から画像引用
^https://webkit.org/blog/7929/designing-websites-for-iphone-x/
実装方法
実装方法はとてもシンプルで、HTMLとCSSに少し記載だけである。
まず、HTMLのmetaタグに以下のコードを記載する。
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
・metaタグについて
・viewportについて
次にbottomの要素またはbody要素にCSSセレクタに以下のコードを記載する。
padding-bottom: env(safe-area-inset-bottom);
完成！
参考にした記事