移动端高清屏文字发虚、图片模糊的根本原因是CSS像素与物理像素未对齐，需通过viewport缩放、媒体查询+transform缩放、srcset多倍图及rem/vw动态字号实现精准适配。
移动端高清屏（如 iPhone Retina、Android 2x/3x 屏）上文字发虚、图片模糊，根本原因不是“没切图”，而是 CSS 像素与物理像素没对齐——必须让 1px 的 CSS 边框或文字，真正占据 1 个物理像素，而不是被浏览器强行插值渲染。
viewport 宽度设成 device-width 就够了吗
不够。只写 width=device-width 只是让布局视口宽度等于设备逻辑像素（比如 iPhone 13 是 390 CSS 像素），但不解决 dpr=2/3 下的渲染精度问题。浏览器仍会把 1px 的边框拉伸到 2 个物理像素再模糊填充，导致发虚。
关键要配合 initial-scale 和设备 dpr 动态计算缩放比：
- 若设计稿基于 750px（dpr=2 时对应 iPhone 6 的物理宽度），则
initial-scale = screen.width / 750才能让 CSS 像素与设备逻辑像素对齐 - 直接写死
initial-scale=1.0在 dpr≠1 的设备上，会放大或压缩渲染，加剧模糊 - 安卓 WebView 对
maximum-scale支持不稳定，建议用 JS 动态设置content，避免被忽略
border: 1px solid #ccc 在高清屏上变粗或发虚
这是最典型的 dpr 渲染失真：CSS 的 1px 被映射成 2 或 3 个物理像素，浏览器用抗锯齿插值填充，结果就是灰边、毛边、不锐利。
立即学习“前端免费学习笔记（深入）”；
可靠解法不是“用 background 模拟”，而是用媒体查询 + transform 缩放：
- 对 dpr=2 设备：
@media (-webkit-min-device-pixel-ratio: 2) { .line { transform: scaleY(0.5); } } - 对 dpr=3：
@media (-webkit-min-device-pixel-ratio: 3) { .line { transform: scaleY(0.33); } } - 必须同时加
transform-origin: top;防止位移 - 不要用
border-image或box-shadow替代，兼容性和性能都不稳定
图片在 retina 屏上显示模糊的根源
不是“图片尺寸小”，而是 src 的图片宽高（比如 200×100）和它在页面中渲染的 CSS 尺寸（比如 width: 200px; height: 100px;）完全一致，但 dpr=2 时，这 200px 实际占用了 400 物理像素，浏览器只能拉伸插值。
正确做法分两层：
- HTML 层：用
srcset提供多倍图，例如<img src="icon@1x.png" srcset="icon@1x.png 1x, icon@2x.png 2x, icon@3x.png 3x" alt="HTML移动端高清屏布局的像素适配方法" > - CSS 层：确保该
<img alt="HTML移动端高清屏布局的像素适配方法" >的 CSS 尺寸始终按 1x 设计稿来写（即width: 20px;），让浏览器自动选 2x 图并以 20px 渲染 - 禁止写
width: 40px; background: url(icon@2x.png)这种硬编码，会强制拉伸
font-size: 14px 在不同 dpr 设备上实际物理大小不一致
因为 14px 是 CSS 像素单位，而物理尺寸 = CSS 像素 × 物理像素比 ÷ 设备 PPI。dpr 越高，同样 14px 文字越小（物理毫米更短）。
真正保证可读性的方式是放弃固定 px 字号，改用：
-
rem+ JS 动态设置根字号：根据window.devicePixelRatio调整document.documentElement.style.fontSize - 或直接用
vw：例如font-size: 4.2vw;（在 375px 屏下 ≈14px，且随屏幕等比缩放） - 慎用
em，嵌套深时容易失控；%依赖父级，不可靠
最易被忽略的是：即使用了 rem，如果 viewport 缩放不准，根元素的 font-size 计算基准仍是错的——dpr 适配是 viewport、JS、CSS 三层联动，漏一环就糊。
