iOS和Firefox不支持zoom属性，因其仅为IE私有非标准属性；应改用transform: scale()并设置transform-origin: 0 0，同时处理body缩放导致的空白与滚动条问题。
为什么 iOS 和 Firefox 里 zoom 完全不生效
zoom 是 IE5.5 起的私有属性，仅在旧版 IE 和部分 WebKit 内核浏览器（如早期 Chrome/Safari）中被非标准支持。iOS Safari 从 WebKit 迭代起就明确不实现该属性；Firefox 从未支持，且会在开发者工具中报警告：This page uses the non standard property “zoom”。它不是“偶尔失效”，而是根本没被解析——样式表里写 zoom: 0.8，在这些浏览器中等同于没写。
用 transform: scale() 替代时必须加 transform-origin
zoom 默认以元素左上角为缩放原点，而 transform: scale() 默认以中心点（50% 50%）缩放，直接替换会导致布局偏移、文字错位、按钮点击区域偏移等问题。
- 要完全对齐
zoom行为，必须显式设置transform-origin: top left - 移动端需特别注意：iOS Safari 对
transform-origin的百分比值支持稳定，但用0 0更稳妥（避免某些旧版 WKWebView 解析差异） - 别漏掉前缀：虽然现代 iOS 已不需要
-webkit-transform，但若需兼容 iOS 12–13 或钉钉/企业微信内嵌 WebView，仍建议保留-webkit-transform和-webkit-transform-origin
示例：
div.resizable {
transform: scale(0.8);
transform-origin: 0 0;
-webkit-transform: scale(0.8);
-webkit-transform-origin: 0 0;
}
全局缩放 body 时，右侧空白和滚动条怎么来的
直接对 body 应用 transform: scale(0.8) 后，页面宽度会按比例缩小，但视口（viewport）本身没变，导致右侧出现巨大空白，触发水平滚动条——这不是 bug，是 CSS transform 的标准行为：缩放不改变文档流尺寸，只改变渲染像素。
- 必须配合
width: 100vw或min-width: 100vw强制容器撑满视口 - 同时重置
body { margin: 0; padding: 0; }，否则默认margin: 8px会被放大，加剧溢出 - 慎用
overflow-x: hidden在body上——它可能截断绝对定位元素或遮罩层
真正该清理的不是写法，而是使用场景
现在还依赖 zoom 做响应式适配或字体缩放，本质是把布局问题交给渲染层硬扛。比如用 zoom: 0.75 强行压缩整个 PC 页面到手机屏，会放大字体锯齿、错乱 touch 区域、破坏媒体查询断点逻辑。
- 响应式应优先用 viewport + rem/em + media query 组合
- 动态缩放需求（如图表、地图）应走 JS 控制容器尺寸 + CSS 变量驱动，而非全局 transform
- 代码库中残留的
*zoom: 1、zoom: 1等 IE hack，现在可安全删除——它们已无实际作用，反而干扰现代布局调试
最常被忽略的一点：缩放后 input 元素的光标位置、软键盘弹出逻辑、focus 状态样式都可能异常，这些不会报错，但用户操作会卡顿或失焦。务必在真机上测 touch 交互链路，不能只看视觉是否“看起来一样”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
