Flutter WebViewWidget内嵌iframe视频在Pixel 6a显示异常求助

针对你遇到的不同Android设备上YouTube iframe显示不一致的问题，以下是修复方案及原因分析：

修复后的代码 #

var html = '''
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        body { margin: 0; padding: 0; }
        .youtube-iframe { width: 100%; height: 100%; border: none; background: #FFFFFF; }
    </style>
</head>
<body>
    <iframe class="youtube-iframe" allowtransparency="true" src="$ytLink" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
</body>
</html>
''';

_controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(Colors.white)
  ..loadHtmlString(html);

return Container(
  width: width,
  height: height,
  alignment: Alignment.center,
  margin: EdgeInsets.only(left: margin, right: margin, top: edge, bottom: edge),
  child: WebViewWidget(controller: _controller),
);

问题根源及修复说明 #

1. 缺失视口配置
   Android 14的WebView对无视图口声明的HTML会默认采用桌面端缩放规则，导致内容被缩小显示。添加视口标签后，强制WebView适配容器尺寸，同时禁用用户缩放避免干扰。

2. 固定尺寸适配失效
   原代码中iframe使用固定的$width和$height，没有考虑不同设备的像素密度（DPI）差异。Android 14对WebView的像素转换逻辑更严格，直接使用固定数值会导致实际显示尺寸偏差。改用100%宽高让iframe自动填充WebView容器，彻底解决尺寸适配问题。

3. 样式冗余干扰
   原iframe设置的margin、padding会占用容器空间，压缩视频显示区域。移除这些冗余样式后，iframe可以完全填充容器。

4. WebView基础配置补充
   设置WebView背景色与iframe背景色一致，避免出现视觉断层；确保JavaScript模式开启，保证YouTube播放器正常运行。

额外调试建议 #

• 确认width和height变量是通过MediaQuery.of(context).size等方式获取的逻辑像素，而非物理像素
• 检查AndroidManifest.xml中是否开启硬件加速（<application android:hardwareAccelerated="true">），部分高版本Android设备需要此配置保证WebView渲染正常

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