iOS端WebView如何修改虚拟分辨率 解决320px宽度适配问题

适用场景说明 #

所有方案均不需要改动现有已适配桌面端、Android端的Web应用UI代码，可直接落地。 #

一、Native端可控场景（自行开发的App内嵌WebView） #

可直接通过原生配置调整虚拟宽度，零侵入Web端代码：

• 若使用已废弃的UIWebView：
  初始化时设置scalesPageToFit = YES，同时删除所有Native端强制指定viewport宽度的代码，WebView会自动匹配设备实际逻辑宽度（iPhone 12 Pro默认识别为390px，不会出现320px的受限宽度）。
• 若使用当前标准的WKWebView：
  1. 初始化WKWebViewConfiguration时，将defaultWebpagePreferences.preferredContentMode设置为WKContentModeMobile，避免默认加载桌面模式。
  2. 删除Native端手动设置scrollView.minimumZoomScale、maximumZoomScale的限制代码。
  3. 核心无侵入实现：通过WKUserScript在WebView页面加载前注入以下脚本，直接将虚拟宽度强制设置为适配Android端的400px标准：

     (function() {
       let viewportMeta = document.querySelector('meta[name="viewport"]');
       if (!viewportMeta) {
         viewportMeta = document.createElement('meta');
         viewportMeta.name = 'viewport';
         document.head.appendChild(viewportMeta);
       }
       // 强制设置虚拟宽度为400px，自动计算缩放比例适配WebView实际宽度
       viewportMeta.content = `width=400, initial-scale=${window.innerWidth / 400}, viewport-fit=cover`;
     })();
     

  该脚本完全在Native端注入，不需要修改Web应用的任何源码。

二、Native端不可控场景（第三方App内嵌WebView） #

仅需在Web应用入口添加少量代码，不改动现有UI布局：

• 优先排查现有viewport meta标签：若存在写死width=320的配置，直接替换为以下内容，WebView会自动适配设备实际逻辑宽度：

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

• 若因业务限制无法修改现有viewport标签，可通过全局等比缩放适配，不需要调整任何UI样式：
  1. 用JS判断当前为iPhone且WebView虚拟宽度<360px时，动态注入以下CSS：

     html {
       /* 按比例缩放400px宽的UI到320px的可视宽度 */
       transform: scale(0.8);
       transform-origin: top left;
       /* 抵消缩放带来的宽度收缩，保证布局正常 */
       width: 125%;
     }
     

  2. 该逻辑不会影响桌面端、Android端的现有展示效果。

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