Flutter WebView iOS端字体大小异常偏大问题求助

问题描述 #

使用flutter_inappwebview渲染网站时，iOS端全应用出现部分文本字体异常偏大的情况，网页端显示正常。项目CSS采用rem单位定义字体大小，已尝试设置minimumFontSize:1但仅对Android生效。

显示对比 #

• 网页端效果：
  
• iOS模拟器WebView效果：
  

问题原因 #

这确实和rem单位有关：
rem基于HTML根元素的font-size计算，而iOS的WKWebView（InAppWebView在iOS的底层实现）默认存在自动文本缩放机制，同时可能会覆盖或调整根元素的默认font-size，导致rem计算出的字体大小偏离预期。另外你提到的minimumFontSize确实仅对Android的WebView生效，iOS不支持该配置。

解决方案 #

1. 强制锁定根元素字体大小并禁用自动缩放（CSS层面） #

在网页的全局CSS中添加以下规则，固定根元素font-size并关闭iOS的自动文本调整：

html {
  font-size: 16px !important; /* 根据你的设计需求设置基准值 */
  -webkit-text-size-adjust: 100% !important;
}

-webkit-text-size-adjust:100%会强制iOS WebView不自动调整文本大小，避免rem计算被干扰。

2. 配置iOS专属WebView参数（Flutter代码层面） #

在InAppWebView的iOS配置中设置textSizeAdjustment为100，明确禁用文本缩放：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的网页地址")),
  crossPlatform: InAppWebViewOptions(
    minimumFontSize: 1, // 保留Android的配置
  ),
  ios: IOSInAppWebViewOptions(
    textSizeAdjustment: 100, // 强制文本缩放比例为100%，禁止自动调整
  ),
)

3. 检查并修正viewport设置 #

确保网页的meta viewport配置正确，避免视口缩放导致文本变大：

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

该配置会固定视口宽度为设备宽度，禁止用户缩放，同时避免WebView自动调整布局缩放文本。

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