1. はじめに
env(safe-area-inset-bottom) と env(safe-area-inset-top) は、デバイスの下部と上部の安全領域のサイズを取得するために使用される CSS の変数です。
いわゆる安全領域とは、iPhone X以降のデバイスにおいて、画面の「前髪」や「ホームインジケーター」によってブロックされたり覆われたりすることを回避し、コンテンツが安全領域内に表示されることを保証するための有効領域を指します。
这个变量最好和padding或者height（可结合calc一起）结合使用，会达到最好的效果。
2. 申請
- パッドとの組み合わせ
padding-bottom: env(safe-area-inset-bottom);
安全領域を 20 ピクセル高くしたい場合は、次のように calc を使用します。
padding-bottom: calc(20px + env(safe-area-inset-bottom));
- 高さとの組み合わせ
height: calc(100vh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) ;
- モデルの互換性:
env (safe-area-inset-bottom) および env (safe-area-inset-top) は一部のモデルでは認識されず、高さなどの障害が発生します。互換性のあるもの:
//兼容普通机型，不识别变量的机型：
height: calc(100vh - 144px);
//兼容苹果手机
height: calc(100vh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
これら 2 つの変数が認識されると、2 番目の文が実行されて最初の文が上書きされ、これら 2 つの変数が認識されない場合、2 番目の文は認識されず、最初の文が実行されます。これは完全に互換性のある書き方です！