Viewport segments

概要

viewport-segments はGalaxy FoldなどのフォルダブルデバイスでのWeb開発を支援する機能です。ディスプレイが分割される位置やサイズをCSS環境変数で取得でき、ヒンジ部分を考慮したレイアウトを構築できます。デュアルスクリーンデバイスでの最適な表示を実現するために使用します。

対応ブラウザ

基本構文

@media (horizontal-viewport-segments: 2) {
  .content {
    display: grid;
    grid-template-columns: env(viewport-segment-width 0 0)
      env(viewport-segment-width 1 0);
  }
}

実務での使いどころ

• フォルダブルデバイス対応

  Galaxy Foldなどの折りたたみデバイスで、ヒンジの位置に合わせて2画面レイアウトを構築します。

注意点

アクセシビリティ

• 分割レイアウトでもコンテンツの読み順が論理的であることを確認し、スクリーンリーダーが正しく読み上げられるようにしてください。

参考リンク

• MDN Web Docs — Viewport segments