iOS Safari侧滑菜单展开时页面缩放的根本原因是内容溢出触发视口自动缩放，需通过CSS类统一控制overflow-x: hidden、overscroll-behavior: none和touch-action: pan-y，并避免使用position: absolute导致的溢出计算问题。
侧滑菜单展开时页面缩放，根本不是 JS 控制问题
这不是你 toggle 类写错了，也不是 transform 动画没加对。iOS Safari 会主动“放大”整个页面，只因它检测到内容溢出——哪怕你只是把一个 position: absolute 的菜单设为 right: -200px，只要它的祖先容器没约束溢出，浏览器就认为“有东西跑出去了”，进而触发视口缩放以让用户看到“被裁掉的部分”。
常见错误现象：
菜单刚打开，页面突然变小、文字模糊；关闭后页面卡在缩放状态，底部留白；双指缩放无法禁用。
- 必须给
document.documentElement或body加overflow-x: hidden，仅靠overflow: hidden不够，iOS 对x方向特别敏感 -
meta标签里的user-scalable=no在 iOS 10+ 已基本失效，别依赖它 - 不要用
document.body.style.overflow = 'hidden'直接写内联样式——会被其他 CSS 覆盖，且动画过程中易抖动
用 CSS 类统一控制滚动与缩放行为
正确做法是把滚动和缩放约束全部收束到一个 class 里，JS 只负责开关这个类。这样既避免样式冲突，也防止动画期间重排抖动。
使用场景：菜单打开时锁定横向溢出、禁用主滚动、阻止下拉刷新穿透；关闭后完全恢复。
立即学习“前端免费学习笔记（深入）”；
- 在
:root或html上定义.is-menu-open类，而非作用于body（iOS 下body高度不可靠） - 类内必须包含：
overflow-x: hidden、overscroll-behavior: none（防 iOS 下拉刷新穿透）、touch-action: pan-y（禁用横向手势缩放） - 菜单本身用
position: fixed，右边界设为right: 0，初始transform: translateX(100%)，展开时切回translateX(0)
为什么 position: absolute 会导致缩放和白边
因为 .nav-links 这类菜单元素一旦设为 position: absolute，又没被包裹在 position: relative 的父容器里，它的 right: -200px 就会直接相对于 html 或 body 计算——而这两个元素默认没有 overflow: hidden，于是负偏移区域成了“合法可滚动区”，浏览器被迫扩展视口宽度，结果就是缩放 + 白边 + 滚动条闪现。
- 修复方式不是改菜单的
right值，而是给最近的非-static 祖先（比如nav或div.app-container）加position: relative和overflow: hidden - 更稳妥的做法是放弃
absolute，改用fixed：它不依赖祖先定位上下文，直接锚定视口，天然规避溢出计算 - 若必须用
absolute，确保其父容器高度明确（如height: 100dvh），否则100vh在 iOS 中可能计算错误
双击放大和多点触控缩放必须单独拦截
即使你加了 overflow-x: hidden 和 touch-action: pan-y，iOS 仍可能响应双击或双指手势。这不是 bug，是浏览器默认行为——它认为用户想查看“被遮挡内容”。
- 双击放大需监听
touchend，用时间戳判断两次间隔 ≤ 300ms，然后e.preventDefault()；必须绑定到document.documentElement，且选项设{ passive: false } - 双指缩放可在菜单容器上加
style="touch-action: none"，但会影响所有手势，慎用；更推荐在.is-menu-open类里统一设touch-action: pan-y - 别在菜单 DOM 上直接绑
touchstart并preventDefault——这会同时禁掉菜单内的滚动（比如长列表），应只针对根容器做全局限制
真正麻烦的从来不是怎么让菜单滑出来，而是怎么让它“消失得干净”：不残留滚动、不触发缩放、不干扰其他交互。这些细节藏在 CSS 层叠规则和移动端事件机制里，改一行 class 比调十行 JS 更可靠。
