iOS端Chrome与Safari网站过宽：登录弹窗触发横向缩放问题求助

以下是针对你遇到的问题的具体排查和解决方向：

• 锁定视口缩放行为
  确认你的视口meta标签是否严格限制了缩放，iOS浏览器有时会因为弹窗内容触发自动缩放，即使没有设置min-width属性。推荐设置：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

  若user-scalable=no被iOS忽略，可尝试添加viewport-fit=cover，同时避免使用100vw作为容器宽度——iOS中100vw会包含滚动条宽度，容易导致内容超出视口。

• 修正弹窗宽度计算逻辑

  • 给弹窗及内部所有元素添加box-sizing: border-box，避免padding、border额外增加宽度导致溢出：

    .login-modal, .login-modal * {
      box-sizing: border-box;
    }
    

  • 弹窗容器不要用固定宽度，改用max-width: 90vw; width: 100%;，确保在小屏设备上自适应视口；内部输入框等元素用width: 100%，同时父容器设置padding: 0 16px预留边距，避免贴边溢出。

• 弹出弹窗时锁定页面body
  弹窗显示时，给body添加样式阻止页面滚动，防止视口因滚动行为被调整：

  body.modal-active {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
  

  注意：使用position: fixed会丢失页面滚动位置，可在弹窗打开前用JS记录window.scrollY，关闭时通过window.scrollTo(0, savedScrollY)恢复。

• 排查弹窗定位与动画

  • 弹窗使用position: fixed时，用left: 0; right: 0; margin: 0 auto;替代固定宽度，确保弹窗始终在视口内居中且不超出边界。
  • 暂时移除弹窗的入场动画（比如transform: scale()类缩放动画），测试是否是动画触发了iOS的视口缩放误判。如果是，改用opacity或translate类动画替代。

• Safari专属适配调整

  • 给弹窗容器添加-webkit-overflow-scrolling: touch;，若弹窗内部有滚动，配合overflow-y: auto;使用，同时确保滚动容器宽度不超出视口。
  • 检查是否有元素使用-webkit-transform: translateZ(0);这类硬件加速属性，暂时移除后测试是否解决问题——这类属性有时会导致iOS视口计算异常。

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