vertical-viewport-segments

構文

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

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

例

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

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

上側のコンテナーの高さを上セグメントの高さ (env(viewport-segment-height 0 0)) に設定し、下側のコンテナーの高さを下セグメントの高さ (env(viewport-segment-height 0 1)) に設定します。

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

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

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

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

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

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

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

仕様書

ブラウザーの互換性

関連情報

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