如何在iPad上强制WKWebView显示移动端网页版本

你碰到的这个情况我之前也遇到过——iPad的WKWebView有时候会“固执”地默认渲染桌面端页面，哪怕已经设置了preferredContentMode或者自定义UserAgent，和Safari的表现差异确实让人头疼。下面分享几个亲测有效的额外方案，你可以试试：

1. 自定义UserAgent + 强制注入Viewport元标签 #

很多网站会同时参考UserAgent和Viewport来判断是否切换移动端布局，单一设置可能不够。你可以同时做两件事：

• 设置更贴近iPhone的UserAgent，让网站误以为是iPhone访问：

  webView.customUserAgent = @"Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1";
  

• 在网页加载完成后注入JavaScript，强制覆盖Viewport设置：

  - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
      NSString *viewportScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'); document.getElementsByTagName('head')[0].appendChild(meta);";
      [webView evaluateJavaScript:viewportScript completionHandler:nil];
  }
  

双重配合下，大部分网站都会切换到移动端布局。

2. 拦截并修改网页重定向请求 #

有些网站会在页面加载时通过JavaScript检测设备信息，自动跳转到桌面端页面。你可以在导航代理里拦截这类跳转，手动替换为移动端域名（如果网站有专门的移动端站点，比如m.example.com）：

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction preferences:(WKWebpagePreferences *)preferences decisionHandler:(void (^)(WKNavigationActionPolicy, WKWebpagePreferences *))decisionHandler API_AVAILABLE(ios(13.0)) {
    preferences.preferredContentMode = WKContentModeMobile;
    if (@available(iOS 14.0, *)) {
        preferences.allowsContentJavaScript = YES;
    }
    
    // 替换为目标网站的移动端域名
    NSURL *originalURL = navigationAction.request.URL;
    NSString *originalHost = originalURL.host;
    if ([originalHost isEqualToString:@"www.example.com"]) {
        NSString *mobileHost = @"m.example.com";
        NSURLComponents *components = [NSURLComponents componentsWithURL:originalURL resolvingAgainstBaseURL:NO];
        components.host = mobileHost;
        NSURLRequest *mobileRequest = [NSURLRequest requestWithURL:components.URL];
        [webView loadRequest:mobileRequest];
        decisionHandler(WKNavigationActionPolicyCancel, preferences);
        return;
    }
    
    decisionHandler(WKNavigationActionPolicyAllow, preferences);
}

3. 全局设置WKWebView的网页偏好 #

有时候仅在导航代理里设置preferredContentMode可能被后续请求覆盖，你可以在初始化WKWebView时，全局配置网页偏好：

WKWebpagePreferences *webpagePrefs = [[WKWebpagePreferences alloc] init];
webpagePrefs.preferredContentMode = WKContentModeMobile;
if (@available(iOS 14.0, *)) {
    webpagePrefs.allowsContentJavaScript = YES;
}

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.defaultWebpagePreferences = webpagePrefs;

// 用这个配置初始化你的WKWebView
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];

全局设置会对所有加载的页面生效，优先级更高。

4. 业务允许的话，改用SFSafariViewController #

如果以上方法都没效果，而Safari本身能完美显示移动端页面，那可以考虑直接用SFSafariViewController——它完全复用Safari的渲染引擎和设置，自然就能正确适配移动端布局，还自带安全、分享等功能：

#import <SafariServices/SafariServices.h>

// 加载目标网页
NSURL *targetURL = [NSURL URLWithString:@"https://your-target-url.com"];
SFSafariViewController *safariVC = [[SFSafariViewController alloc] initWithURL:targetURL];
[self presentViewController:safariVC animated:YES completion:nil];

最后补充个小技巧：有些网站的响应式逻辑会优先根据屏幕宽度判断，你可以尝试把WKWebView的frame设置为类似iPhone的宽度（比如375pt），再配合Viewport设置，也能触发移动端渲染。

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