WKWebView中网页右侧留白引发横向滚动问题求助

1. 验证Viewport元标签的实际生效状态 #

WKWebView对Viewport的解析偶尔会和Safari存在差异，可通过JS确认当前Viewport参数，同时尝试调整配置：

• 在didFinish中执行以下JS，查看实际生效的Viewport内容：

webView.evaluateJavaScript("document.querySelector('meta[name=\"viewport\"]').content") { result, error in
    print("Current Viewport: \(result ?? "Not found")")
}

• 尝试修改Viewport添加viewport-fit=cover，并移除user-scalable=no测试：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">

2. 定位隐性溢出元素 #

视觉上无超宽元素，但scrollWidth异常，大概率存在隐藏/脱离文档流但仍撑开宽度的元素，可通过JS遍历排查：

webView.evaluateJavaScript(`
Array.from(document.querySelectorAll('*')).forEach(el => {
  const rect = el.getBoundingClientRect();
  if (rect.right > window.innerWidth) {
    console.log('Overflow Element:', el.tagName, el.className, rect.right);
  }
});
`) { _, _ in }

重点排查绝对定位、固定定位、visibility:hidden（非display:none）的元素，这类元素容易被忽略。

3. 强制约束页面宽度与溢出行为 #

临时添加全局CSS规则，验证是否能解决滚动问题，以此反向定位根源：

html, body {
  width: 100% !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

若生效，说明页面存在未被正确约束的容器或元素。

4. 检查WKWebView的布局约束与配置 #

• 确认Interface Builder中WebView的约束：需绑定leading/trailing/top/bottom到父视图，无固定宽度约束，避免WebView本身超出屏幕。
• 强制开启移动端渲染模式，避免WKWebView默认使用桌面端布局：

if #available(iOS 14.0, *) {
    webView.configuration.defaultWebpagePreferences.preferredContentMode = .mobile
}

5. 排查CSS变换类属性 #

检查页面中是否存在transform: scale()、zoom等缩放属性，这类属性可能导致视觉上元素未超宽，但实际计算的scrollWidth被异常撑开。

6. 验证模拟器环境设置 #

确认iPhone 15 Pro模拟器的：

• 显示缩放设置：「设置」→「显示与亮度」→「视图」是否为「标准」模式，若为「放大」会缩小可用屏幕宽度。
• 模拟器窗口缩放比例：确保模拟器窗口为100%缩放（菜单「Window」→「Zoom」→「100%」），避免窗口缩放影响WebView尺寸计算。

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