应使用 transform: scale() + transition 配合 class 切换实现页面缩放效果，因其兼容性好、GPU加速、不触发重排；需显式设置 transform-origin 控制缩放中心，避免在 body 上直接缩放，并注意第三方库尺寸适配。
页面切换时做缩放效果，别用 zoom，直接用 transform: scale() + transition，配合 class 切换最稳。 因为 zoom 在 Firefox 全系不支持，Safari 对它解析不稳定，且会干扰打印、选中、焦点管理；而 transform: scale() 是标准 CSS3 属性，GPU 加速、不触发重排、兼容性覆盖所有现代浏览器（Chrome 12+、Firefox 16+、Safari 4+、Edge 12+）。
用 class 控制缩放状态比内联 style 更可靠
切换缩放本质是“状态切换”，不是“动态计算”。硬编码 element.style.transform = 'scale(1.3)' 容易和 JS 其他逻辑冲突（比如动画中途被 reset），也难维护。推荐用 class：
- HTML 中给容器加一个统一的 class，比如
class="page-transition" - CSS 里定义初始态和目标态：
.page-transition { transform: scale(1); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }和.page-transition.is-active { transform: scale(1.15); } - JS 切换只做一件事：
el.classList.toggle('is-active')，干净、可预测、支持多次快速点击
缩放中心点必须显式设为 transform-origin
默认 transform-origin: 50% 50%（居中），但页面级缩放常希望从左上角或视口中心出发，否则切换时内容“漂移”。常见错误是缩放后顶部/左侧被裁掉，其实只是 origin 没对齐：
- 想让页面像模态框一样从视口中心弹出：加
transform-origin: center center - 想模拟“页面推入”效果（如路由切换），建议用
transform-origin: top left，再配合position: fixed和inset: 0避免滚动条干扰 - 如果父容器有
overflow: hidden，缩放后边缘被截，临时改成overflow: visible调试，确认是 origin 还是 overflow 导致
避免在 body 或 html 上直接缩放
对 应用 transform: scale() 看似简单，但会引发三个隐藏问题：
立即学习“前端免费学习笔记（深入）”；
- 滚动条位置错乱：缩放后
document.body.scrollHeight不更新，window.scrollTo()失效 - 绝对定位元素偏移：所有
position: absolute子元素的top/left值仍按原始尺寸计算，视觉上“飘走” - 表单焦点异常：某些浏览器（特别是 Safari iOS）在缩放后的
body内点击 input，软键盘弹出位置错位 - 正确做法：把要缩放的内容包进一个
<div class="page-wrapper">，只对这个 wrapper 缩放，<code>body保持原尺寸和布局流真正麻烦的是缩放后与第三方库（比如地图、图表、富文本编辑器）的交互——它们内部依赖 clientWidth/clientHeight 或 getBoundingClientRect()，而这些值不会随
transform缩放自动调整。遇到这类情况，不能只靠 CSS，得在缩放前后手动触发它们的 resize 回调或重新初始化。
