根本原因是 ios safari 未加载匹配设备像素比（dpr）的图源，被迫用 1x 图插值拉伸渲染；需提供 bg.jpg、bg@2x.jpg、bg@3x.jpg 并用复合媒体查询和显式 background-size 适配。
根本原因不是图片本身质量差，而是 iOS Safari 没加载到匹配设备像素比（DPR）的图源，被迫用 1x 图插值拉伸渲染——它不是“糊了”，是“被强行凑像素”。
为什么 background-image 在 Safari 真机上一缩放就糊
双指捏合缩放时，Safari 会动态调整渲染分辨率，但 background-image 不响应 DPR 变化。如果只有一张 bg.jpg，哪怕写了 background-size: 750px auto，它仍会被拉伸 2–3 倍填充物理像素，插值算法让边缘发虚、文字毛边。
- 必须同时提供
bg.jpg、bg@2x.jpg、bg@3x.jpg，三者路径、大小写、扩展名完全一致 -
@media查询必须复合写：(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)，单写任一条件都会漏机型 -
background-size必须显式设为设计稿原始宽度（如750px auto），不能用cover或100% 100% - 验证方法：长按背景 → “在新标签页中打开图像”，如果原图清晰但网页里糊，就是 DPR 适配问题
为什么 img 标签加了 filter: blur() 还是糊得不均匀
iOS Safari 对 img 元素的 filter: blur() 支持脆弱：iOS 15.4 之前常失效；即使生效，也默认走 CPU 渲染，滚动时掉帧明显，模糊区域还可能被父级 overflow: hidden 截断。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 强制 GPU 加速：给
img加transform: translateZ(0)或will-change: filter - 避免
blur(0px)：它仍有重绘开销，切换时卡顿；改用filter: none彻底退出 - 大图（>2000px 宽）先缩放再模糊：用
object-fit: cover缩到视口尺寸，再加filter - Safari 下模糊溢出会被裁，需手动加
padding补偿溢出区域
为什么写了 -webkit-font-smoothing 字体还是发虚
-webkit-font-smoothing 在 iOS Safari 和 WebView 中被 WebKit 硬性忽略——这不是你代码没生效，是系统根本不读这行 CSS。
- 真正影响清晰度的是字体加载时机：
font-display: optional或swap会导致回退字体闪动+重排，临时模糊 - 关键标题建议用
font-display: block，阻塞最多 3s，换掉系统字体再渲染 - 检查
viewportmeta 是否写错，比如user-scalable=yes被用户手动放大过，导致 CSS 像素和物理像素错位 - 自定义字体（WOFF2/TTF）无法享受 San Francisco 的次像素渲染，别指望靠 CSS 属性“修”
最易被忽略的点：所有 DPR 适配方案都依赖文件名严格对应（@2x 后缀、大小写、路径层级）、@media 规则顺序（1x 必须在最前）、以及 background-size 的像素值必须与设计稿原始宽高一致——少一个条件，真机上就糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
