scale() 在移动端做微小缩放必然失真，因浏览器对非整数倍缩放启用双线性插值，导致文字发虚、svg模糊；推荐用 rem + viewport 等比缩放替代，或严格限制 scale 使用条件。

直接说结论：scale() 在移动端做微小缩放（比如 scale(0.98) 或 scale(1.02)）几乎必然失真，尤其是文字和 SVG 图标——这不是你写法错，而是浏览器对非整数倍缩放的插值渲染机制决定的。

为什么 scale(0.98) 这种“微调”反而最糊？

移动端 WebKit（iOS Safari）和 Chromium（安卓 WebView）在处理非整数倍缩放时，会启用双线性插值，把矢量内容当位图处理。哪怕只缩 2%，也会触发亚像素渲染，导致：

• font-smoothing 失效，14px 文字边缘发虚、锯齿感明显
• SVG 图标因 viewBox 被二次采样而模糊，尤其线条交汇处出现灰边
• 高 DPR 设备（如 iPhone 15 Pro）上，scale(1.02) 实际被映射为 1.02 × 3 = 3.06 倍物理像素，插值误差放大

替代方案：用 rem + viewport 控制整体缩放粒度

真正可控、不失真的“微小缩放”，不是靠 transform: scale()，而是让整个 UI 的基准单位随屏幕等比变化：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 在 <meta name="viewport"> 中设 width=device-width, initial-scale=1，禁用用户缩放
• JS 动态计算 document.documentElement.style.fontSize，例如：16 * (window.innerWidth / 375) + 'px'（以 375px 屏宽为基准）
• 所有尺寸统一用 rem：按钮 height: 2.25rem、字体 font-size: 1.125rem
• 此时“微调”只需改一个 fontSize 值，所有元素等比缩放，无插值、无重排、事件坐标完全准确

如果必须用 scale，只限局部且满足三个硬条件

仅在图标、按钮等纯装饰性小元素上使用 scale()，且必须同时满足：

• 缩放值必须是硬件友好倍数：scale(0.75)、scale(1.25)、scale(1.5) —— 避免 1.03、0.97 这类任意小数
• 加强制锐化声明：image-rendering: -webkit-optimize-contrast（Safari）或 image-rendering: crisp-edges（Chrome）
• 文字不参与缩放：把文字抽离到不带 transform 的兄弟元素中，或用 transform: scale(1) 覆盖重置

真正容易被忽略的是：所谓“微小缩放”的需求，90% 场景下其实是设计稿与设备像素比不匹配导致的视觉偏差。与其在 CSS 层反复调试 scale()，不如从 viewport 和 rem 基准入手——那才是移动端缩放的根节点。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！