用matchMedia('(min-resolution: 2dppx)')可可靠检测Retina屏并动态加载高清CSS，需创建media="not all"的link标签，匹配后设为"all"触发加载；-webkit-min-device-pixel-ratio仅作iOS旧版兜底，不可单独依赖。
如何用 matchMedia 检测 Retina 屏并加载高清 CSS
直接用 window.devicePixelRatio > 1 判断不保险——它只反映当前缩放状态，不能代表设备物理像素密度是否支持高清资源。真正可靠的检测方式是结合 matchMedia 查询 (min-resolution: 2dppx) 或 (min-resolution: 192dpi)，这是 CSS 媒体特性标准写法，兼容现代移动端浏览器（iOS Safari ≥ 9、Chrome Android ≥ 50）。
动态引入建议走 JS 控制流，避免在 HTML 中硬编码多套 <link> 标签（会触发无意义预加载）：
- 先创建
<link rel="stylesheet" media="not all">占位节点，防止 FOUC（闪白） - 用
matchMedia('(min-resolution: 2dppx)')监听匹配状态 - 匹配成功后，把
media改为"all"，触发加载 - 注意：Safari 对
dppx支持更稳定，dpi在部分安卓 WebView 中可能 fallback 失效
const hdMedia = window.matchMedia('(min-resolution: 2dppx)');
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/hd.css';
link.media = 'not all'; // 先禁用
document.head.appendChild(link);
const applyHD = () => {
if (hdMedia.matches) {
link.media = 'all';
}
};
applyHD();
hdMedia.addEventListener('change', applyHD);
@media (-webkit-min-device-pixel-ratio: 2) 还能用吗
能，但仅限 iOS 和旧版安卓 WebView，且属于非标准私有前缀。W3C 标准早已废弃 -webkit-min-device-pixel-ratio，它在 Chrome 80+、Firefox、Edge 中已不生效；iOS Safari 虽仍支持，但行为不稳定（比如横竖屏切换时可能不触发重匹配）。
如果你必须兼容 iOS 10–12 或某些定制 WebView，可作为兜底方案与标准写法共存，但不要单独依赖：
立即学习“前端免费学习笔记（深入）”；
- 优先写标准语法：
@media (min-resolution: 2dppx) - 兜底加一行：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) - 避免只写
@media (-webkit-min-device-pixel-ratio: 2)—— 现代桌面 Safari 已忽略该规则
高清 CSS 文件里该写什么内容
不是所有样式都需要高清适配。重点替换的是那些对像素精度敏感的资源：
- 背景图：用
background-image: url('icon@2x.png');+background-size: contain;（保持原始尺寸语义） - 边框：避免
border: 1px solid #ccc，改用border: 0.5px solid #ccc（仅支持 dppx 的浏览器才渲染为物理 1px） - 字体抗锯齿：可加
-webkit-font-smoothing: antialiased;，但注意这会影响中文字体灰度，慎用 - 禁止在高清 CSS 里重复定义通用布局（如 flex、grid），否则易覆盖主样式表逻辑
一个常见错误是把高清 CSS 当成“放大版”主样式——它只应负责高 DPR 下的视觉保真，不是响应式断点的替代品。
为什么不用 image-set() 替代高清 CSS
image-set() 是 CSS 原生方案，语法简洁：background-image: image-set(url(icon.png) 1x, url(icon@2x.png) 2x);，但它有两个硬伤：
- iOS Safari 直到 16.4 才支持
image-set()，低于此版本完全不解析，降级为透明背景 - 无法控制高清图的其他属性（如
background-size、background-position）随 DPR 动态变化 - 服务端无法基于 UA 或 DPR 做资源裁剪或压缩，CDN 缓存粒度变粗
所以生产环境更推荐「CSS 媒体查询 + 独立高清样式表」组合：可控性强、降级明确、调试路径清晰。
最易被忽略的一点：高清 CSS 加载后，务必检查 background-size 是否与原始图比例一致。很多团队只换图不调 size，结果在 iPhone 14 Pro 上背景拉伸变形——这不是 DPR 问题，是 CSS 布局没跟上资源升级。
