horizontal-viewport-segments

構文

horizontal-viewport-segments 特性は、端末が持つ水平ビューポートセグメント数を表す 1 以上の整数値 (<integer>) として指定します。

• 値は次の場合は 1 となります。
  • 折り曲げ式ではない端末（例えば、標準的な単一の画面を持つスマートフォンやタブレット）
  • 折り曲げ可能な端末が開いているか閉じられた状態（continuous 端末形態）にある。
  • 2 画面のマルチ画面型端末、または折り曲げ画面型端末で、現在折り曲げられており、縦方向に配置されているため、画面セグメントが縦に並んでいる状態。
• この値が 2 となるのは、2 画面のマルチ画面型端末、または折り曲げ画面型端末で、水平方向に折れ曲がっている状態（folded 端末形態）であり、画面セグメントが横に並んでいる状態です。
• 折り曲げ可能な端末で複数の折れ曲がり箇所がある場合、この値は 2 を超えることがあります。

例

基本的な horizontal-viewport-segments の使い方

このスニペットでは、折り曲げ式端末でセグメントが左右に並んでいる場合を処理するため、horizontal-viewport-segments メディアクエリーを使用しています。

左側のコンテナーの幅を左セグメントの幅 (env(viewport-segment-width 0 0)) に設定し、右側のコンテナーの幅を右セグメントの幅 (env(viewport-segment-width 1 0)) に設定します。

折り曲げ部分が両コンテナー間で占める幅を計算するには、左コンテナーの右端オフセットから右コンテナーの左端オフセットを差し引きます (calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));)。

.wrapper {
  height: 100%;
  display: flex;
}

@media (horizontal-viewport-segments: 2) {
  .wrapper {
    flex-direction: row;
  }

  .list-view {
    width: env(viewport-segment-width 0 0);
  }

  .fold {
    width: calc(
      env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)
    );
    background-color: black;
    height: 100%;
  }

  .detail-view {
    width: env(viewport-segment-width 1 0);
  }
}

完全な動作デモについては、ビューポートセグメント API デモを確認してください（ソースコード）。同時に、完全なデモの説明についてはビューポートセグメント API の使用方法も確認してください。

仕様書

ブラウザーの互換性

関連情報

• vertical-viewport-segments @media 特性
• ビューポートセグメント API
• Origin trial for Foldable APIs - developer.chrome.com (2024)