遵循作業系統文字縮放

總覽

視障使用者通常會在作業系統層級設定文字縮放 (例如 iOS 的動態字體，或 Android/ChromeOS 的字型大小縮放)。根據預設，行動瀏覽器會忽略這些 OS 層級的無障礙設定，避免舊版固定像素網站的視覺效果遭到破壞。

請使用 <meta name="text-scale"> 標記，選擇採用原生作業系統文字縮放功能，而不是讓頁面保持靜態，或依賴自訂、不穩定的 JavaScript 版面配置計算。啟用後，瀏覽器會根據使用者的 OS 偏好設定，動態調整根字型大小 (1rem)，讓所有相對 (rem/em) 字型大小、版面配置和間距都能自動調整，且不影響美觀。

導入作業

1. 選擇採用 OS 文字縮放功能

將 <meta name="text-scale"> 元素放在文件的 <head> 中。這會向支援的瀏覽器表示，您的版面配置是現代化、可調整且可安全縮放：

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

2. 使用相對字體排版和間距

使用相對單位 (rem 或 em) 而非固定像素 (px) 定義字型大小。行高請使用無單位值，以便根據每個元素的計算字型大小按比例縮放。

如果間距與文字大小相關，或必須隨著文字縮放而調整，請使用相對單位設定邊界和邊框間距。與文字無關的間距在適當情況下可使用固定單位，前提是縮放不會導致文字裁剪、重疊、內容遺失或版面配置無法使用：

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

只有在設計需要與繼承的瀏覽器預設值不同時，才在 body 上設定基本文字大小，否則請讓其繼承。使用 rem 或 em 等相對單位，設定特定元素 (例如標題) 的大小。如要根據根字型大小設定大小，請使用 rem；如要根據父項元素的字型大小設定大小，請使用 em。請勿在 :root 或 html 上設定自訂字型大小。

流暢字體排版

流暢字體排版可使用與可視區域相關的單位 (例如 vw)，前提是字型大小也包含與字型相關的元件 (例如 rem 或 em)。如要瞭解更多流暢擴充技術，包括容器查詢單位和 clamp()，請參閱「流暢擴充」。

避免只使用可視區域單位調整文字大小：

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

請改為結合字型相對值和可視區域相對縮放，並使用相對最小值和最大值：

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

測試文字是否能調整為預設大小的至少 200%，且不會遺失內容或功能。對於流暢字體排版，一個實用的經驗法則是將最大字型大小保持在最小字型大小的 2.5 倍以內。此外，請在 320 CSS 像素可視區域寬度 (相當於 1280 CSS 像素寬可視區域的 400% 縮放比例) 測試重排功能；除非必要，否則內容必須保持可用，且不需雙向捲動。

3. 使用可擴充的回應式中斷點

回應式中斷點不得假設文字會維持預設大小。如果中斷點是為了回應文字的可用空間，建議使用內容導向版面配置、容器查詢或以 em 為基礎的媒體查詢，而非固定像素門檻。

測試回應式版面配置時，請啟用作業系統文字縮放和瀏覽器縮放功能。文字必須清晰可辨，內容必須清楚可見，不得重疊、裁剪或水平捲動。

4. 確保內容換行和彈性高度

文字放大時，元素需要更多垂直和水平空間，以免遭到截斷或重疊。為確保元件穩定，請將版面配置設計為圍繞內容動態展開，而非強制使用固定座標：

允許文字容器放大：包含文字的元件和容器必須能夠放大，以容納縮放後的文字。避免使用固定的 height 或 block-size 值，以及限制性的 max-height 或 max-block-size 值，以免造成裁剪或溢位。建議根據內容調整大小；只有在需要最小尺寸時，才使用 min-height 或 min-block-size。
允許自然換行：請勿在包含句子的區塊上，使用 white-space: nowrap 限制內嵌軸文字換行。讓文字自然換行。
採用彈性 Flexbox 和 Grid 換行 (選用範例)：如果是多欄資訊卡圖庫，請使用 repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) 等重排欄，這樣一來，如果項目超過相對寬度門檻，就會垂直堆疊：

/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

5. 請勿覆寫根字型大小

透過 <meta name="text-scale" content="scale"> 元素選擇加入時，請「不要」在樣式表中明確設定根 font-size。這包括 :root 或 html 的宣告，並適用於絕對單位、相對單位和計算值。

舉例來說，請勿使用固定值覆寫根字型大小：

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

請勿將 <meta name="text-scale" content="scale"> 選擇加入與 env(preferred-text-scale) 結合，手動套用作業系統文字縮放。瀏覽器會透過中繼選擇加入套用縮放比例，因此同時使用兩者可能會導致雙重縮放：

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

將根字型大小留給瀏覽器。瀏覽器會自動處理作業系統文字比例，並套用至相對於根字型大小的內容。

備用策略

在不支援 <meta name="text-scale" content="scale"> 的瀏覽器上，版面配置會正常降級。頁面會以瀏覽器的標準預設基本字型大小 (通常為 16 像素) 顯示版面配置，使用者仍可使用標準手動頁面縮放或雙指撥動縮放選項。