遵循操作系统文本缩放

Web 功能： <meta name="text-scale">

概览

视力损害的用户通常会在操作系统级别配置文字缩放（例如 iOS 上的动态类型或 Android/ChromeOS 上的字体大小缩放）。默认情况下，移动浏览器会忽略这些操作系统级无障碍设置，以防止旧版固定像素网站出现视觉效果问题。

请勿让页面保持静态，也不要依赖自定义、不稳定的 JavaScript 布局计算，而是应使用 <meta name="text-scale"> 标记选择启用原生操作系统文本缩放。启用后，浏览器会动态缩放根字体大小 (1rem)，以匹配用户的操作系统偏好设置，从而使所有相对 (rem/em) 字体大小、布局和间距都能自动且流畅地缩放。

实现

1. 选择启用操作系统文本缩放

将 <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 和网格换行（可选示例）：对于多列卡片库，请使用 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) 结合使用来手动应用操作系统文本缩放。浏览器会通过 meta 选择启用应用缩放，因此同时使用这两种方法可能会导致双重缩放：

/* ❌ 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 像素）显示布局，用户仍可使用标准的手动页面缩放或双指张合缩放选项。