移动端高清屏图片模糊和视口不匹配的本质是css像素与物理像素未对齐，核心是让图片资源足够且浏览器能按dpr精准选取，同时viewport缩放比例需匹配物理像素。
移动端高清屏图片模糊和视口不匹配，本质是CSS像素与物理像素没对齐。核心就两件事：让图片资源够多、让浏览器知道怎么挑；让viewport缩放比例刚好填满物理像素，不拉伸也不压缩。
用srcset + x描述符精准匹配dpr
这是最直接、兼容性好、无需JS的方案。关键不是“多做图”，而是让浏览器按window.devicePixelRatio自动选：
- 写法要统一：
<img src="icon.png" srcset="icon@1x.png 1x, icon@2x.png 2x, icon@3x.png 3x"> - 别混用
w和x——比如"icon@2x.png 2x, icon@750w.png 750w"会导致Safari只认w部分，1x失效 -
src只是IE等老浏览器兜底项，现代浏览器完全忽略它，所以必须确保@2x/@3x文件真实存在且路径一致（包括@符号） - Vite/Webpack构建后容易404？检查打包插件是否过滤了带
@的文件名，或改用picture+source更可控
背景图模糊？换![]()
+ object-fit
background-image天生不响应srcset，也绕不开浏览器重采样。尤其iOS Safari在cover/contain下必糊：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把背景图改成
<img>标签，配合object-fit: cover和绝对定位，视觉效果一样，但能走srcset - 真要用CSS背景，必须配媒体查询+
background-size：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .bg { background-image: url("bg@2x.jpg"); background-size: 750px auto; } } - 切图命名必须严格对应：
bg.jpg/bg@2x.jpg/bg@3x.jpg，大小写、扩展名、路径一个都不能错
动态设置viewport scale适配不同dpr
默认<meta name="viewport" content="width=device-width">在高dpr设备上会让页面被缩放，导致1px边框变粗、文字发虚：
- 用JS读取
devicePixelRatio，动态写viewport：const scale = 1 / window.devicePixelRatio;document.querySelector('meta[name=viewport]').setAttribute('content', `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, user-scalable=no`); - 注意：安卓部分WebView对
initial-scale支持不稳定，建议搭配maximum-scale和user-scalable=no锁死行为 - 折叠屏、1.5x屏等非整数dpr设备也要覆盖，不能只写
2和3，比如@1.5x图和min-resolution: 1.5dppx查询都要有
Canvas绘图和截图必须按dpr缩放
Canvas默认按CSS像素渲染，但在dpr=2/3的屏幕上，一个CSS像素要占4/9个物理像素，不放大画布尺寸就会强制插值模糊：
- 创建canvas时同步放大：
const ratio = window.devicePixelRatio || 1;canvas.width = width * ratio;canvas.height = height * ratio;ctx.scale(ratio, ratio); -
html2canvas必须显式传
scale: window.devicePixelRatio，旧版0.4.x根本不读dpr - 导出图片用
toDataURL("image/png", 1)锁死质量，避免浏览器自动压缩
