移动端Chrome从二维码/超链接跳转时网站尺寸缩放异常如何解决

• 页面加载完成1-2秒后重新触发缩放调整的逻辑是完全可行的，这种延迟触发的方式不需要修改原有页面布局逻辑，改造成本极低，这也是目前处理iOS版Chrome外部唤起视口偏差问题的主流解法。
  该问题的实际触发逻辑是：从二维码、外部链接唤起iOS Chrome时，浏览器初始化视口参数的时机早于导航栏、地址栏的位置计算流程，直接把整个屏幕高度作为可视区高度做渲染，等浏览器完成导航栏收起的动画后，实际可视高度已经变小，但页面布局没有重新计算，就会出现页面垂直方向被过度拉长的异常效果。手动输入URL进入时，Chrome已经提前完成了完整的视口初始化计算，因此不会触发该问题。
• 相比固定延迟触发的方案，更稳妥的适配优化可以从两个方向落地：
  1. 替换原有静态视口单位，从根源上消除计算偏差
     现有代码中大量使用的vh单位、百分比高度，在Chrome首屏渲染时会取未扣除导航栏高度的屏幕总高度值。可以替换为iOS版Chrome已全面支持的动态视口单位dvh，该单位会自动跟随导航栏、工具栏的展开/收起状态实时更新可视区高度，无需手动触发重算。
     替换后的核心CSS规则参考：

     /* 兼容升级原有高度规则 */
     html, body {
       height: 100%;
       height: 100dvh;
     }
     
     #rotationRequest {
       height: 100%;
       height: 100dvh;
       font-size: 3.2vh;
       font-size: 3.2dvh;
     }
     
     .subtitle {
       height: 100%;
       height: 100dvh;
     }
     
     #borderCtl {
       height: calc(100dvh - 60px);
     }
     

  2. 搭配轻量JS补偿逻辑，覆盖各类边界场景
     不需要写复杂的计算逻辑，只需要在视口稳定后强制浏览器触发一次重排，同时加固定时长的兜底逻辑覆盖导航栏动画周期即可，参考代码：

     let refreshTimer = null;
     function refreshViewport() {
       // 临时修改body内联样式，强制浏览器重新计算布局
       document.body.style.minHeight = window.innerHeight + 'px';
       clearTimeout(refreshTimer);
       // 短暂延迟后清除内联样式，恢复原有CSS规则
       refreshTimer = setTimeout(() => {
         document.body.style.minHeight = '';
       }, 100);
     }
     
     // 页面加载、视口尺寸变化时自动触发重算
     window.addEventListener('load', refreshViewport);
     window.addEventListener('resize', refreshViewport);
     // 1.5秒兜底延迟，覆盖Chrome导航栏动画的最长耗时
     setTimeout(refreshViewport, 1500);
     

• 适配时需要避开的常见问题：
  • 现有viewport meta标签不需要做额外修改，保持width=device-width, initial-scale=1.0的配置即可，不要随意加强制缩放、禁止缩放的参数，否则会和浏览器自带的视口计算逻辑产生冲突。
  • 不要用固定的窗口高度值写死页面容器，否则后续Chrome版本更新调整导航栏高度时，会再次出现适配偏差。

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