horizontal-viewport-segments

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

horizontal-viewport-segments 是一個 CSS 媒體特性，用於檢測裝置是否具有指定數量的水平（並排）視口分段。

與視口分段 API 相關，vertical-viewport-segments 特性可用於建立在多視口裝置上表現良好的響應式設計——這些裝置的顯示屏被劃分為邏輯上獨立的視口分段，例如可摺疊或鉸鏈裝置。

語法

horizontal-viewport-segments 特性被指定為一個大於或等於 1 的 <integer> 值，表示裝置擁有的水平視口分段數量。

以下情況，該值為 1：
- 非可摺疊裝置（例如，標準單屏智慧手機或平板電腦）
- 展開或合上的可摺疊裝置（處於 continuous 裝置姿態）。
- 雙屏鉸鏈裝置或當前摺疊且垂直定向（分段上下堆疊）的可摺疊裝置。
雙屏鉸鏈裝置或當前摺疊（處於 folded 裝置姿態）且水平定向（分段並排）的可摺疊裝置，該值為 2。
對於具有多個摺疊的可摺疊裝置，該值可能大於 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));）。

css

.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 以獲取完整的演示說明。