WKWebView在设备旋转时内容无法跟随旋转的问题求助

一、原生端配置排查 #

• 确认WKWebView的布局约束配置正确：如果用Auto Layout，需保证WebView与父视图的上下左右四条边约束完全对齐；如果用autoresizingMask，需开启UIViewAutoresizingFlexibleWidth和UIViewAutoresizingFlexibleHeight，确保旋转后WebView本身的尺寸会跟随父视图同步变化。
• 检查当前ViewController的旋转权限：重写shouldAutorotate返回YES，supportedInterfaceOrientations返回业务需要支持的方向范围，确保当前页面本身允许旋转。
• 如果WebView所在ViewController嵌套在UINavigationController、UITabBarController等容器中，需同步确认父容器的旋转配置也对应开启，避免父容器限制旋转导致WebView收不到布局变更通知。

二、网页适配逻辑修复 #

• 先确认网页本身是否添加了适配移动端的viewport元标签，标准写法如下：

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

  缺少该标签会导致网页按固定宽度渲染，旋转后不会适配新的视口尺寸。
• 如果网页本身没有添加上述配置，可以通过WKUserScript主动注入，不需要修改网页源码：
  • Objective-C写法

  WKUserScript *viewportScript = [[WKUserScript alloc] initWithSource:@"var meta = document.createElement('meta'); meta.name = 'viewport'; meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; document.getElementsByTagName('head')[0].appendChild(meta);" injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
  [webView.configuration.userContentController addUserScript:viewportScript];
  

  • Swift写法

  let viewportScript = WKUserScript(source: "var meta = document.createElement('meta'); meta.name = 'viewport'; meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; document.getElementsByTagName('head')[0].appendChild(meta);", injectionTime: .atDocumentEnd, forMainFrameOnly: true)
  webView.configuration.userContentController.addUserScript(viewportScript)
  

三、旋转后主动触发重绘 #

如果完成上述配置后问题仍然存在，可以在旋转完成后主动触发网页重排：
在ViewController的旋转回调中，调用JS主动发送resize事件，触发前端适配逻辑重新执行：

• Objective-C写法

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
    [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
    [coordinator animateAlongsideTransition:nil completion:^(id<UIViewControllerTransitionCoordinatorContext>  _Nonnull context) {
        [self.webView evaluateJavaScript:@"window.dispatchEvent(new Event('resize'))" completionHandler:nil];
    }];
}

• Swift写法

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    coordinator.animate(alongsideTransition: nil) { _ in
        self.webView.evaluateJavaScript("window.dispatchEvent(new Event('resize'))")
    }
}

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