Safe area inset environment variables

概要

safe-area-inset-top/right/bottom/leftは、iPhoneのノッチやカメラホール付きディスプレイなどの非矩形画面において、コンテンツが切れない安全な表示領域を示すCSS環境変数です。env()関数を通じてアクセスし、主にviewport-fit=coverと組み合わせて使用します。モバイルWebアプリやPWAのフルスクリーン表示で、画面端のコンテンツが隠れないよう保護する際に不可欠です。

対応ブラウザ

基本構文

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

実務での使いどころ

• ノッチ付きデバイスへの対応

  iPhoneのノッチやDynamic Islandでコンテンツが隠れないよう、安全領域に基づいたパディングを設定します。

注意点

アクセシビリティ

• 安全領域の確保により、操作可能な要素がデバイスの物理的な障害物に隠れず、すべてのユーザーがタッチ操作できるようになります。

参考リンク

• MDN Web Docs — Safe area inset environment variables
• Can I use — Safe area inset environment variables