【cordova・css】セーフティーエリア対応について

cordovaフレームワークを使ってモバイルアプリを作るにあたって必ず

壁に当たるのがiphonexのヘッダー・フッター問題。

今までのcordovaアプリ開発におけるiphoneは、ヘッダー・フッター・ページを各コンポーネントとして着目し

それぞれを一部品としてパズルのようにあてはめていく形式でしたが

iphonexからはセーフティーゾーンとヘッダー部分のノッチが追加され、それぞれに

適切な対応を求められるようになりました。

更にandroidや旧世代のiphone8と同等の動きをさせないといけないため、開発者側はこれらを意識して開発しなければいけなくなりました。

実際に特に何の変哲もないフッターをiphonexで実装すると、フッターの部分がセーフティーエリアに

埋もれて崩れてしまいます。

これを回避するには、heightにsafe-area-inset-bottomなるものを追加します。

このsafe-area-inset-bottomというプロパティは、セーフティーゾーンに他の要素が入り込まないように

する防波堤のような役割を持っており、これを利用して任意の高さ+セーフティーエリア分だけ要素を伸ばすことで

セーフティーエリアとフッターが繋がったようなきれいな見た目に装飾することができます。

セーフティーエリアとの切り分けは以下のようにおこなっております。

#serfty {
padding: 0;
height: calc(50px + env(safe-area-inset-bottom));
position: fixed;
background-color: #F6AD49; }

これだとheightは、50px+セーフティーエリアの分だけバックグラウンドで選択した色

をしており、一つのフッターのように見せることに成功しています。

フッターとセーフティーエリアの色を同じにしたい場合はbackground-colorを指定しましょう。

position: fixedで固定するのも忘れずに。

以上超基本的なセーフティー対応でした。ベースはこれで十分だと思うので

後はアプリに合わせて色やヘッダーの大きさを自由に変えてかっこいいアプリを作ってください。

P.S.アマゾンプライムのヘッダーとかかっこいいなと思いました。あの透けてる感じの。