zoom改变的是渲染层缩放而非layout尺寸计算，它在布局完成后对像素块进行光栅化缩放，导致border变粗、文字模糊等物理失真，且box-sizing和calc()无法修正该失真。
zoom 改变的是渲染层缩放，不是 layout 尺寸计算
因为 zoom 是一个渲染级（paint-time）变换，它不参与 CSS 布局流程（layout phase），而是对已计算好的整个盒模型像素块做光栅化缩放。浏览器先按原始尺寸完成 layout（得到 width/height/padding/border 的逻辑像素值），再把整块渲染输出“拉伸”或“压缩”。所以你看到的 border 变粗、文字变糊、元素占位“撑开”，其实都是同一组逻辑像素被映射到更多/更少物理像素的结果。
zoom 下 1px border 实际物理像素 = 1 × 当前 zoom 值
这是最直观的体现：设 border: 1px solid #000，在 zoom: 1.5 时，该边框会被渲染为 1.5 个设备像素——但设备像素不能切分，于是浏览器用亚像素抗锯齿填充，视觉上就发虚；在 DPR=2 的屏幕 + zoom: 2 下，1px 逻辑边框 → 渲染为 4 物理像素（1 × 2 × 2），明显加粗。
-
zoom: 1：1px → 1 物理像素（DPR=1）或 2 物理像素（DPR=2） -
zoom: 1.2：1px → 1.2 物理像素 → 浏览器插值模糊 -
zoom: 2：1px → 2 物理像素（DPR=1）或 4 物理像素（DPR=2）
box-sizing 和 calc() 都无法修正 zoom 引起的物理失真
box-sizing: border-box 只影响 width/height 如何分配 padding 和 border，calc() 也只是在 layout 阶段算出一个逻辑像素值——它们都发生在 zoom 渲染之前。一旦 zoom 生效，所有已生成的像素块都被统一缩放，包括字体、SVG、阴影、甚至 background-size 里的像素单位。
- 写了
width: calc(100% - 2px)，zoom 后这个 “2px” 在视觉上也跟着放大了 -
transform: scale()行为类似，但它不触发重排，而zoom会强制重绘整个子树 - Firefox 完全不支持
zoom，所以跨浏览器一致性为零
真正需要缩放控制时，优先用 transform 而非 zoom
如果你的目标是“让元素看起来更大但不影响布局流”，transform: scale() 更可控：它不改变文档流尺寸，且能配合 transform-origin 精确锚点；更重要的是，你可以用 JS 动态读取缩放因子并校正交互坐标（比如点击定位），而 zoom 的缩放值无法通过 getComputedStyle 稳定提取（Chrome 返回字符串，Firefox 不返回）。
立即学习“前端免费学习笔记（深入）”；
- 避免用
zoom做响应式适配或打印样式——它不被 @media print 识别 - Electron 中若必须用 zoom，记得监听
webFrame.setZoomFactor()并同步修正 clientX/clientY 坐标 - 伪元素 +
transform: scaleY(0.5)这类 hack 对 zoom 无效，因为它作用于伪元素自身，而 zoom 会把它也一起缩放
关键点在于：zoom 没有“逻辑缩放”这回事，它就是粗暴地把已经画好的图放大。你调的不是尺寸，是显卡的采样率。
