螢幕設定

回應式網頁設計在許多滿足手機的需求方面，智慧型手機問世前，很少人認真考慮了網站在手持裝置上應呈現的外觀和風格。隨著手機內建網路瀏覽器的問世，這個趨勢也徹底改變。

回應式網頁設計鼓勵抱持不同假設的思維。先前我們常以為網站只能透過電腦瀏覽，但現在也常是為手機和平板電腦設計同一個網站。事實上，行動裝置使用率已逐漸降低。

這種反應靈敏的思維模式，能滿足您的未來需求。使用者瀏覽自己的網站和螢幕時，現在我們甚至能想像不到。這個思維也延伸到螢幕之外。使用者現在也能在沒有螢幕的裝置上觀看你的內容。如果語音助理使用明確的語意 HTML 基礎，就能使用你的網站。

螢幕上的世界也仍在實驗階段。現今市面上有許多配備摺疊式螢幕的裝置。而且會對您的設計帶來一些挑戰。

雙螢幕

折疊式裝置的使用者可以選擇要讓網路瀏覽器只佔據其中一個螢幕，還是能同時顯示在兩個螢幕上。如果瀏覽器跨越兩個螢幕，顯示的網站就會根據兩個螢幕之間的轉軸而細分。內容看起來不太美觀。

可視區域區隔

有一項實驗性媒體功能，可偵測網站是否在雙螢幕裝置上顯示。建議的媒體功能名稱為 viewport-segments。共有以下兩種類型：horizontal-viewport-segments 和 vertical-viewport-segments。

如果 horizontal-viewport-segments 媒體功能回報 2 值，vertical-viewport-segments 回報的值為 1，表示裝置上的轉軸是從上往下執行，並將內容分成兩個並排面板。

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

如果 vertical-viewport-segments 媒體功能回報 2 值，horizontal-viewport-segments 回報的值是 1，則轉軸會從側邊執行，將內容分割成兩個面板並排顯示。

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

如果 vertical-viewport-segments 和 horizontal-viewport-segments 回報的值為 1，表示網站只會顯示在一個畫面中，即使裝置有多個畫面也一樣。這相當於不使用任何媒體查詢。

環境變數

viewport-segments 媒體功能本身無法協助您設計惱人的轉軸。您必須知道轉軸的大小。這時環境變數就能派上用場。

CSS 中的環境變數可讓你將不愉快的裝置入侵因素列入考量。舉例來說，您可以設計圍繞「凹槽」設計在 iPhone X 上使用環境值 safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom 和 safe-area-inset-left。這些關鍵字會納入 env() 函式中。

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

環境變數的運作方式與自訂屬性類似，這表示在環境變數不存在時，您可以傳入備用選項。

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

如要在 iPhone X 上運作這些環境變數，請更新指定 viewport 資訊的 meta 元素：

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

網頁版面配置現在會佔滿整個可視區域，並以裝置提供的插邊值安全地填充文件。

系統提議針對摺疊式螢幕提供六個新的環境變數：viewport-segment-width、viewport-segment-height、viewport-segment-top、viewport-segment-left、viewport-segment-bottom、viewport-segment-right。

，瞭解如何調查及移除這項存取權。

，瞭解如何調查及移除這項存取權。

以下是含有兩欄的版面配置範例，寬度比另一欄寬。

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

如果是具有垂直轉軸的雙螢幕，請將第一欄設定為第一個畫面的寬度，第二欄則設定為第二個螢幕的寬度。

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

將雙螢幕視為機會。也許一個螢幕可用來顯示可捲動的文字內容，另一個則顯示圖片或地圖等固定元素。

未來

摺疊式裝置會成為下一個大螢幕嗎？說不定沒有人無法預測行動裝置會有多熱門，因此對於日後的板型規格可以抱持開放的態度。

最重要的是，您應確保網站能因應未來可能發生的任何變化。其中，回應式設計有各式各樣的用途：除了一組實用技巧外，還可以做為打造未來網路世界的心態。

隨堂測驗

測試您對螢幕設定的瞭解程度