React Native应用无障碍适配：文本缩放功能问题咨询

核心结论：不需要为每个Text组件单独添加属性，通过全局配置即可解决 #

针对你遇到的WCAG 1.4.4文本缩放要求，结合react-native-web的特性，按以下步骤排查修复：

1. 检查运行时实际的viewport配置
   react-native-web会自动生成viewport meta标签，即使你没在顶层HTML里手动编写。打开浏览器DevTools（移动端可远程调试），查看<head>里的<meta name="viewport">内容，确认是否包含user-scalable=no或maximum-scale=1.0这类限制缩放的配置。

如果存在限制，手动覆盖viewport设置：

• 若使用纯react-native-web，在入口文件（如index.js）添加以下代码：

const viewportMeta = document.querySelector('meta[name="viewport"]');
if (viewportMeta) {
  viewportMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes';
}

• 若使用Next.js等框架，在_document.js里手动写入正确的viewport标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

2. 移除文本缩放的CSS限制
   react-native-web默认可能给Text组件添加了text-size-adjust: none的CSS属性，这会禁止浏览器自动缩放文本。在全局样式中覆盖该设置：

* {
  -webkit-text-size-adjust: auto !important;
  text-size-adjust: auto !important;
}

3. React Native原生端适配（若涉及）
   如果是iOS/Android原生端的系统字体缩放问题（而非Web端捏合缩放），只需全局开启Text组件的字体缩放支持，无需逐个修改：

import { Text } from 'react-native';

Text.defaultProps = {
  ...Text.defaultProps,
  allowFontScaling: true
};

这段代码放在项目入口文件即可，所有Text组件都会继承该配置，满足系统字体放大到200%的要求。

验证方案 #

修复后，Web端测试捏合缩放至200%，确认内容无截断、功能正常；原生端调整系统字体大小至最大，检查文本是否正常缩放。

内容的提问来源于stack exchange，提问作者Demian Sims