移动端Chrome设备旋转、全屏切换后页面缩放异常问题

问题成因 #

这个异常是Chrome在处理全屏模式切换和设备方向旋转时的视口状态同步bug导致的，核心原因有三点：

• 全屏模式会临时覆盖视口配置：进入全屏时，Chrome会忽略页面原有的viewport meta设置，强制将视口适配全屏显示（包括隐藏浏览器UI、调整CSS像素与物理像素的映射）；退出全屏时，浏览器本应恢复初始视口状态，但叠加方向旋转操作后，状态恢复流程出现了竞态错误。
• 方向旋转的视口缓存冲突：Chrome会缓存横竖屏切换时的视口缩放参数，全屏操作打断了这个缓存的正常更新逻辑，退出全屏后，旋转回竖屏时，浏览器错误复用了横屏全屏阶段的缩放比例，而非重置为竖屏的理想视口参数。
• 视觉视口与布局视口的不同步：移动Chrome的视觉视口（用户实际看到的区域）和布局视口（页面渲染的基准宽度）在全屏/方向变化时需要同步更新，但当两个事件几乎同时触发时，浏览器的计算逻辑出现偏差，导致视觉视口的缩放比例没有正确匹配布局视口的宽度。

相关技术原理 #

要理解这个问题，得先清楚Chrome移动版的视口模型：

1. 布局视口（Layout Viewport）：页面渲染的基准宽度，由viewport meta标签的width属性控制，width=device-width就是将其设为设备的理想视口宽度（即屏幕物理宽度除以设备像素比dpr）。
2. 视觉视口（Visual Viewport）：用户当前能看到的页面区域，会随缩放、全屏、方向变化而改变。全屏模式下，Chrome会强制视觉视口铺满整个屏幕，此时可能会临时修改布局视口的宽度或缩放比例。
3. 全屏API的上下文切换：调用document.body.requestFullscreen()时，浏览器会进入独立的渲染上下文，此时会禁用页面的视口自适应逻辑，强制元素占满屏幕；退出全屏时，需要重新计算并同步布局视口和视觉视口，但如果此时方向旋转事件正在处理，两个事件的优先级或执行顺序导致视口参数计算错误。
4. 缩放状态的持久化逻辑：Chrome会保存用户的手动缩放状态，但这里的异常是浏览器将全屏操作误判为用户缩放，退出后没有重置这个状态，导致方向切换时继承了错误的缩放比例。

临时解决办法 #

如果是开发自己的页面，可以通过以下方式规避这个问题：

• 监听全屏和方向变化事件，手动重置视口：

  // 监听全屏切换事件
  document.addEventListener('fullscreenchange', resetViewport);
  // 监听方向变化事件
  window.addEventListener('orientationchange', resetViewport);
  
  function resetViewport() {
    const viewportMeta = document.querySelector('meta[name="viewport"]');
    // 先强制设置不可缩放，重置视口
    viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
    // 延迟恢复可缩放（如果需要）
    setTimeout(() => {
      viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0');
    }, 100);
  }
  

• 使用visualViewport API强制重置缩放：

  window.visualViewport.addEventListener('resize', () => {
    if (window.visualViewport.scale !== 1.0) {
      window.visualViewport.scale = 1.0;
    }
  });
  

• 调整交互逻辑：避免在方向旋转前后触发全屏操作，比如等待方向稳定后再进入全屏，或者退出全屏后延迟允许旋转。

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