Flutter WebView加载Vision360视频大设备出现灰色边框问题

在Flutter中使用WebView展示Vision360视频，原URL显示效果异常，已通过JavaScript调整视频及按钮宽高，但在屏幕尺寸≥6.7英寸的设备上，视频侧边出现灰色线条。尝试在HTML代码中设置border:none后问题仍未解决，需实现大设备上视频无灰色线条的效果。

用到的HTML代码 #

<html style="width:100%; height:100%; margin:0; padding:0; display:flex; justify-content:center;">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.98">
  </head>
  <body style="width:95%; height:100%; margin:0; padding:0; ">
    <div style="width:100%; height:100%; margin:0; padding:0;">
      <iframe src="https://storageweweb.blob.core.windows.net/files/INVENTORYDATA/V360Mini5/Vision360.html?d=790364830-S&autoPlay=1&z=0"
        style="width:100%; height:100%; border:none;"></iframe>
    </div>
  </body>
</html>

Flutter WebView代码 #

class HtmlWebViewInterface extends StatefulWidget {
  final String url;
  final bool isB2bSparkle;
  final bool isSmallerView;
  final void Function(double)? onScaleChanged;
  String? type;

  HtmlWebViewInterface({
    super.key,
    required this.url,
    this.isSmallerView = false,
    this.isB2bSparkle = false,
    this.onScaleChanged,
    this.type = 'medium',
  });

  @override
  State<HtmlWebViewInterface> createState() => HtmlWebViewInterfaceState();
}

class HtmlWebViewInterfaceState extends State<HtmlWebViewInterface> {
  final ValueNotifier<double> _progressValueNotifier = ValueNotifier<double>(0);

  // Ranges from 0 to 1.
  late final WebViewController _webViewController = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadHtmlString(widget.isSmallerView
        ? getHtmlString(widget.url,type: widget.type)
        : getHtmlStringForSmallView(widget.url, type: widget.type))
    ..setNavigationDelegate(
      NavigationDelegate(
        onProgress: (int progress) {
          _progressValueNotifier.value = progress / 100;
        },
        onPageFinished: (_) {
          _progressValueNotifier.value = 1;
        },
      ),
    );
   // ..setBackgroundColor(Colors.red);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(top: 10),
      child: Stack(
        children: [
          Positioned.fill(
            child: WebViewWidget(
              controller: _webViewController,
              gestureRecognizers: {
                Factory<OneSequenceGestureRecognizer>(
                  () => EagerGestureRecognizer(),
                ),
              },
            ),
          ),
          Positioned.fill(
            child: ValueListenableBuilder(
              valueListenable: _progressValueNotifier,
              builder: (context, value, _) {
                if (value < 1) {
                  return widget.isB2bSparkle
                      ? buildProgressIndicator(context,
                          name: 'Loading B2B Sparkle Video...', showName: true)
                      : buildProgressIndicator(context,
                          name: 'Loading Video...', showName: true);
                } else {
                  return const SizedBox();
                }
              },
            ),
          ),
        ],
      ),
    );
  }

  void reloadWebView() {
    _webViewController.reload();
  }
}

1. 修正HTML布局与样式 #

灰色线条多由容器留白、内容溢出或隐藏边框导致，调整如下：

• 移除html标签的display:flex; justify-content:center;，避免居中逻辑产生的隐性留白
• 给body、外层div和iframe添加overflow:hidden，防止内容溢出产生滚动条或线条
• 统一所有容器宽高为100%，消除额外间距

修改后的HTML代码：

<html style="width:100%; height:100%; margin:0; padding:0;">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  </head>
  <body style="width:100%; height:100%; margin:0; padding:0; overflow:hidden;">
    <div style="width:100%; height:100%; margin:0; padding:0; overflow:hidden;">
      <iframe src="https://storageweweb.blob.core.windows.net/files/INVENTORYDATA/V360Mini5/Vision360.html?d=790364830-S&autoPlay=1&z=0"
        style="width:100%; height:100%; border:none; display:block; overflow:hidden;"></iframe>
    </div>
  </body>
</html>

2. 调整WebView背景色与外层布局 #

在Flutter的WebViewController中设置背景色为视频的统一背景色（比如黑色），避免WebView自身背景透出：

late final WebViewController _webViewController = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(Colors.black) // 添加该行代码
  ..loadHtmlString(widget.isSmallerView
      ? getHtmlString(widget.url,type: widget.type)
      : getHtmlStringForSmallView(widget.url, type: widget.type))
  // 其余配置不变

同时可移除外层Container的padding: const EdgeInsets.only(top: 10)，避免顶部间距引发的视觉异常。

3. 针对大设备的动态适配 #

若问题仅出现在大设备，可通过MediaQuery判断屏幕尺寸，动态调整HTML样式：

// 在build方法中获取屏幕尺寸
final screenSize = MediaQuery.of(context).size;
// 转换为实际英寸（逻辑像素 × 设备像素比 ÷ 每英寸像素数，一般取160）
final screenInches = (screenSize.diagonal * MediaQuery.of(context).devicePixelRatio) / 160;
final isLargeDevice = screenInches >= 6.7;

随后在getHtmlString方法中，根据isLargeDevice参数给iframe添加margin: -1px等样式，抵消可能的1px线条。

4. 注入JS强制清除内部元素边框 #

若灰色线条来自iframe内部的视频元素，可在页面加载完成后注入JS强制移除所有元素边框：

// 在NavigationDelegate的onPageFinished中添加
onPageFinished: (_) {
  _progressValueNotifier.value = 1;
  _webViewController.runJavaScript('''
    document.querySelectorAll('*').forEach(el => {
      el.style.border = 'none !important';
      el.style.outline = 'none !important';
      el.style.boxShadow = 'none !important';
    });
  ''');
},

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