CSS サンプル: iOS セーフエリア対応

下記を使用して、iOS のセーフエリア対応を行います。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- ノッチ (切り欠き) 部分に背景色がつくようにする
padding などに下記を設定する
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)
- ノッチやホームインジケーターにページの内容が被らないようにする (古い iOS のために env() だけではなく constant() も指定します)

追加で下記の対応も行っています。