Device posture

概要

折りたたみ式デバイスが普及する中で、デバイスの物理的な状態に応じてレイアウトを最適化できる機能です。端末が折りたたまれているか開いているかを検出し、画面の折り目を避けたコンテンツ配置が可能になります。デュアルスクリーンデバイスへの対応に特に有用です。

対応ブラウザ

基本構文

@media (device-posture: folded) {
  .content {
    flex-direction: column;
    gap: env(fold-height);
  }
}

実務での使いどころ

• 折りたたみデバイス最適化レイアウト

  折りたたみスマートフォンの開閉状態を検出し、開いた状態では2カラム、閉じた状態では1カラムレイアウトに自動切替します。

注意点

アクセシビリティ

• 姿勢変化によるレイアウト切替時に、フォーカス位置やスクリーンリーダーの読み上げ順序が不自然にならないよう注意してください。

参考リンク

• MDN Web Docs — Device posture