Flutter开发如何实现iPad与iPhone等不同设备上文字显示效果一致

问题原因 #

你当前的异常是两个错误用法叠加导致的：

1. Flutter 中 TextStyle 的 fontSize 单位本身是逻辑像素，不需要乘以 devicePixelRatio（该参数是逻辑像素转换为物理像素的倍率，乘完会直接让初始字体大小超出屏幕宽度数倍）
2. 没有给同批次的 AutoSizeText 绑定统一的 AutoSizeGroup，不同长度的文本自适应缩小的比例不同，最终就会出现短文字号大、长文字号小的不一致问题。

解决方案 #

要实现iPad和iPhone端文字显示效果完全一致，按如下步骤修改即可：

1. 以你需要的基准设备（比如你参考的iPad型号）的逻辑宽度为基准计算缩放系数，替换错误的 devicePixelRatio 倍率
2. 给所有需要统一字号的 AutoSizeText 绑定同一个 AutoSizeGroup 实例，保证所有文本缩放到统一字号

修正后代码示例

// 先在State中定义全局的AutoSizeGroup，同组文本字号统一
final _textGroup = AutoSizeGroup();

@override
Widget build(BuildContext context) {
  // 以iPad 10寸的逻辑宽度768为基准，你可以换成你参考的iPad型号的实际逻辑宽度
  final baseWidth = 768;
  final scale = MediaQuery.of(context).size.width / baseWidth;
  // 限制最小缩放比例，避免小屏设备字体过小，可按需调整
  final validScale = scale.clamp(0.5, 1.0);

  return Scaffold(
    body: ListView(
      children: [
        Center(
          child: AutoSizeText(
            'Dummy Text',
            style: TextStyle(fontSize: 60 * validScale),
            maxLines: 1,
            group: _textGroup,
          ),
        ),
        const Divider(),
        Center(
          child: AutoSizeText(
            'Dummy',
            style: TextStyle(fontSize: 60 * validScale),
            maxLines: 1,
            group: _textGroup,
          ),
        ),
        const Divider(),
        Center(
          child: AutoSizeText(
            'Dummy Text Text',
            style: TextStyle(fontSize: 60 * validScale),
            maxLines: 1,
            group: _textGroup,
          ),
        ),
      ],
    ),
  );
}

内容的提问来源于stack exchange，提问作者Leena Marie