cssのenv()関数でスマホのセーフエリアに対応

デバイスのセーフエリアの上部に適切なマージンやパディングを設定できる
第一引数にデバイスごとのセーフエリアの値が入ります。
第二引数にセーフエリアが取得できなかった場合の値が入ります。

上
padding-top: env(safe-area-inset-top, 0px);

右
padding-right: env(safe-area-inset-right, 0px);

下
padding-bottom: env(safe-area-inset-bottom, 0px);

左
padding-left: env(safe-area-inset-left, 0px);

応用
padding-top: calc(50px + env(safe-area-inset-top, 0px));