WebViewWidget iframe 在 Pixel 6a 上出现嵌入

Question

有一些带有

WebViewWidget

的 Flutter 代码，可在

iframe

元素中加载 YouTube 嵌入视频，在 Samsung Galaxy Tab S4 平板电脑上，

iframe

中的 YouTube 视频会相应地填充

WebViewWidget

，但是，在测试相同内容时在 Pixel 6a 手机上编写代码时，YouTube 嵌入视频在

iframe

中嵌入在

WebViewWidget

的左上角，大小不到一半，我不确定为什么？

我能想到的 Galaxy Tab S4 和 Pixel 6a 之间唯一明显的区别是 Android 版本（Tab S4：Android 10，Pixel 6a：Android 14）和 dpi（Tab S4：~287 ppi 密度，Pixel 6a：~429 ppi 密度） .

代码：

var html = '<iframe width="$width" height="$height" allowtransparency="true" style="border: 10px; margin: 10px; padding: 10px; background: #FFFFFF;" src="$ytLink" ></iframe>';

_controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..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));

Answer 1

通过将

iframe

的宽度和高度更改为 100% 而不是以像素为单位的特定值解决了该问题：

<iframe width="100%" height="100%" allowtransparency="true" style="border: 0px; margin: 0px; padding: 0px; background: #FFFFFF;" src="$ytLink" ></iframe>

出于某种原因，在 Pixel 6a 上使用

iframe

的特定宽度和高度值与

WebViewWidget

的父级

Container

宽度和高度（也应该具有相同的宽度和高度）不匹配。