必须用 css transform: scale() + javascript 实现跨浏览器动态缩放，因 zoom 是非标准属性且 safari/firefox 不支持，viewport 仅控制初始状态，双指缩放需手写 touch 逻辑并阻止默认行为。
HTML 没有原生属性能直接实现“自定义缩放控制”——zoom 是非标准 CSS 属性，viewport 的 initial-scale 只影响初始加载且仅对移动端生效，真正在页面运行时动态、可控、跨浏览器的缩放，必须靠 CSS transform: scale() + JavaScript 驱动。
为什么不能用 zoom 属性做自定义缩放
zoom 在 Chrome/Edge 里看似可用，但它是 IE 时代遗留的非标准属性：Safari（包括 iOS）完全不支持；Firefox 从 2019 年起已彻底移除；严格模式下 Safari 还会忽略它的 transition 动画。更关键的是，它和 transform 混用时行为不一致——比如同时设 zoom: 1.2 和 transform: rotate(5deg)，Chrome 可能只渲染旋转，缩放失效。实际项目中一旦需要平滑过渡或兼容性保障，zoom 就得排除。
用 transform: scale() 实现可编程缩放
这是目前唯一可靠、可监听、可限制范围、能配合动画的方案。核心是操作根容器（如 或包裹层 <div id="scaler">）的 <code>transform 值。
- 缩放基准点默认是左上角，务必加
transform-origin: center，否则放大时内容会“偏出视口” - 缩放值建议锁在
0.5 ~ 3区间：低于 0.5 文字过小不可读，高于 3 渲染模糊且内存占用陡增 - 每次更新前先清除旧
transform，再写新值，避免多次叠加导致数值溢出（例如连续点 10 次 +，scale 变成 2^10） - 示例代码：
const scaler = document.getElementById('scaler');<br>let scale = 1;<br>function zoomIn() {<br> scale = Math.min(scale * 1.2, 3);<br> scaler.style.transform = `scale(${scale})`;<br>}<br>function zoomOut() {<br> scale = Math.max(scale / 1.2, 0.5);<br> scaler.style.transform = `scale(${scale})`;<br>}
viewport meta 标签只能管“初始状态”，别指望它做运行时控制
<meta name="viewport" content="initial-scale=1.5"> 仅在页面首次加载时生效，且只对移动 WebView 起作用——桌面 Chrome 完全无视它。更重要的是，这个标签必须硬编码在 HTML 源码的 里，JS 动态插入或 Vue/React SSR 后注入都无效。iOS 10+ 还会无视 user-scalable=no，双指缩放照常发生。所以把它当成“启动参数”，不是“运行时 API”。
移动端双指缩放无法用 HTML/CSS 拦截，必须手写 touch 逻辑
浏览器对 <img> 或普通 <div> 内部的双指手势不提供事件接口。想实现图片预览里的捏合缩放，得自己监听 <code>touchstart/touchmove，计算两指距离比，再驱动 transform: scale()。过程中必须 e.preventDefault()，否则 iOS Safari 会触发 viewport 级别缩放，和你的局部缩放打架。另外，iOS 上模态层要加 -webkit-overflow-scrolling: touch，不然缩放后拖拽卡顿。
真正难的不是写缩放函数，而是缩放后的布局重排、焦点管理、资源释放和辅助技术兼容——比如屏幕阅读器怎么感知当前缩放比例？缩放后表单控件是否仍可聚焦？这些细节不处理，功能上线就踩坑。
