iPhone XやiPhone XSといったスマートフォンの安全距離の設定

主に下部のナビゲーションバー、上部のナビゲーションバーに対して、設定しないと表示されません.
最初にiOSブラウザによって提供され、開発者がビューポートのセキュリティ領域にコンテンツを配置できるようにします.この仕様で定義されたsafe-area-inset-* の値は、矩形以外のビュー領域でもコンテンツが完全に表示されることを保証するために使用できます.
構文

/* Using the four safe area inset values with no fallback values */
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

/* Using them with fallback values */
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);

safe-area-inset-top ,  safe-area-inset-right ,  safe-area-inset-bottom ,  safe-area-inset-left safe-area-inset-*は、ビューポートエッジ内の矩形を定義した4つのtop,right,bottomおよびleftの環境変数からなり、非矩形の表示によって切断されるリスクがなく、コンテンツを安全に入れることができる.通常のノートパソコンモニタなどの長方形ビューポートの値はゼロです.円形文字盤、iPhoneX画面などの非矩形ディスプレイでは、ユーザーエージェントが設定した4つの値で形成された矩形内で、すべての内容が表示されます.
注意:他のCSS属性とは異なり、ユーザーエージェント定義の属性名は大文字と小文字に敏感です.

body {
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
}