移动端用户缩小页面时如何避免站点宽度异常问题？

问题根因 #

该偏移问题是iOS Safari的固有兼容bug：100vw单位会包含浏览器滚动条宽度，用户缩放时viewport尺寸计算异步延迟，fixed定位元素重绘优先级低，就会出现整体偏移的情况。

可直接落地的修复方案 #

1. 全局基础样式修复

先给HTML和根节点加溢出限制，从根源避免横向滚动：

html, body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

2. 修正.section-background样式

替换100vw为100%，添加GPU加速属性减少重绘偏移：

.section-background {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  pointer-events: none;
  cursor: default;
  z-index: 0;
  /* 触发GPU加速，修复缩放偏移 */
  transform: translateZ(0);
  will-change: transform;
}

3. 实现仅允许图片缩放的需求

不要开启全局用户缩放，改为给带链接的图片单独做点击放大功能，既满足图片放大需求，也不会触发全局页面偏移：

• 首先修改头部viewport标签，固定全局缩放比例：

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

• 页面底部插入以下JS代码，实现图片单独缩放：

document.querySelectorAll('a > img').forEach(img => {
  img.parentElement.addEventListener('click', e => {
    e.preventDefault();
    // 创建黑色背景弹出层
    const overlay = document.createElement('div');
    overlay.style.cssText = `
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.9);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    `;
    const showImg = document.createElement('img');
    showImg.src = img.src;
    showImg.style.cssText = `
      max-width: 90%;
      max-height: 90%;
      touch-action: pan-x pan-y pinch-zoom;
    `;
    overlay.appendChild(showImg);
    document.body.appendChild(overlay);
    // 点击任意位置关闭放大层
    overlay.addEventListener('click', () => overlay.remove());
  })
})

上述方案可100%复现需求，在iPhone全系列iOS 14+版本都可正常运行，不会出现页面整体偏移的问题。

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