ちょうどCSSであなたのPWAでノッチを避けてください

仕事では、私は通常、迅速かつ反応ネイティブのネイティブモバイルアプリケーションを作成しています.しかし、新しいプロジェクトのために、我々はそれが進歩的なWebアプリを実装する方が良いと決めた.私はHTML、CSS＆JavaScriptの経験があるので、問題はないと思いました.
私たちが新しい敵に会うまで、すべては計画に従って行っていました:iPhone X.

すみません、それらのボタンをタップしたいです!

ネイティブの背景
ネイティブの世界では、我々は安全なエリアと呼ばれる何かを持っています、我々は内部にものを置くことができて、彼らがノッチと一番下の地域の外にいると確信します.
この方法は、画面の上部にいくつかのコンポーネントを配置するアプリを伝えることは簡単ですが、途中でノッチがある場合は少し下に移動します.
PWAについては、その愚かなボトムバーを回避する最も簡単な方法は、いくつかのpadding-bottomを追加することによってですが、それは他のすべてのデバイスを壊すでしょう.私はJavaScriptでCSSクラスを条件的に加えると思いました、しかし、それはハックのようでした.

環境変数
ご存知のように、カスタムCSS変数をvar(--padding-bottom)で定義することができます.同様に、ブラウザも自分自身を定義することができます.彼らは標準化の過程にあるが、アップルは自分たちの一部を作った.

.navbar {
    padding-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

環境変数をまだサポートしていないブラウザ用のボトムパディングを定義します.我々が第一の規則を省略することになっているならば、第2のものは壊れていて、何も適用されません.
それらをサポートするブラウザでは、ボトムパディングをsafe-area-inset-bottomに等しくし、変数が設定されていない場合は0に立ち下がります.
同様に、top, left and right screen edgesの変数もある.

成功!