viewport元标签必须正确设置，否则高dpi屏幕会出现文字发虚、布局错位等问题；需包含width=device-width和initial-scale=1.0，置于head顶部，配合dpr媒体查询、动态rem基准及srcset多倍图资源。
viewport 元标签必须设对，否则高DPI下直接失真
4K 或 macOS Retina 屏上文字发虚、按钮错位、布局压缩，往往不是 CSS 写得不好，而是 viewport 标签没生效或写错了。它控制浏览器如何把 CSS 像素映射到物理像素，错误配置会让整个渲染链路失准。
-
width=device-width不能省略，否则桌面浏览器（尤其 Chrome）会按 980px 宽度渲染，再缩放，导致字体锯齿、按钮点击偏移 -
initial-scale=1.0必须显式声明，某些 Windows 高 DPI 环境下缺它会导致页面默认缩放为 125%，但未触发媒体查询重算 - 避免写
user-scalable=no—— 它在部分 Electron 应用（如 VS Code 插件页）中会干扰系统级 DPI 缩放逻辑，引发 UI 错位 - 该标签必须放在
最顶部，早于任何 CSS<link>，否则 Safari 可能先按默认 viewport 渲染一次再重排，造成闪动
media query 要同时匹配 dpr 和 width，单靠宽度不够
只用 @media (max-width: 768px) 适配移动端，在 4K 笔记本外接 1080p 显示器时会失效：两个屏幕逻辑宽度可能都是 1920px，但设备像素比（dpr）分别是 2 和 1，CSS 像素密度差一倍。
- 必须组合判断：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)才能捕获高 DPI 设备 - 图标、边框、阴影等依赖像素精度的样式，优先用 dpr 媒体查询单独定义，比如
border: 1px solid #ccc在 dpr=2 下实际是 2 物理像素宽，视觉过粗，应改为border: 0.5px solid #ccc - 避免在 dpr 查询里重写整套布局，只调整像素级细节（字号、间距、边框），否则容易和 width 断点冲突
- Firefox 不支持
-webkit-min-device-pixel-ratio，必须补上(min-resolution: 2dppx)或(min-resolution: 192dpi)才兼容
rem 基准要动态设，静态 16px 在高 DPI 下会放大过度
很多项目根元素写死 html { font-size: 16px; }，在 dpr=2 的屏幕上，1rem = 32 物理像素，文字立刻显得臃肿，按钮高度翻倍，和设计稿比例脱节。
- 用 JS 动态设置：
document.documentElement.style.fontSize = window.devicePixelRatio * 16 + 'px';，让 1rem 始终对应设计稿的 16px 视觉大小 - 注意 iOS Safari 的
window.devicePixelRatio在横竖屏切换时可能延迟更新，建议监听resize和orientationchange事件重新计算 - 如果用了 PostCSS 插件（如 postcss-pxtorem），确认其配置是否识别 dpr —— 默认只转 px，不处理设备缩放逻辑
- 慎用
clamp()替代 rem：虽然它能响应视口宽度，但对 dpr 变化无感，仍需配合 JS 补偿
图片资源必须提供 @2x 并用 srcset 控制，否则在 Retina 屏模糊
直接写 <img src="icon.png">，在 dpr=2 的屏幕下会拉伸模糊，浏览器无法自动选高清图 —— 这不是 CSS 能解决的问题，必须 HTML 层面声明资源候选。
- 用
srcset显式提供多倍图：<img src="icon.png" srcset="icon.png 1x, icon@2x.png 2x"> - 搭配
sizes属性更精准：sizes="(max-width: 768px) 100vw, 200px"，告诉浏览器不同断点下期望的显示宽度，再由浏览器选最匹配的 srcset - CSS 背景图同理：用
image-set()函数，background-image: image-set("icon.png" 1x, "icon@2x.png" 2x);，比 media query 更简洁 - Webpack/Vite 构建时，确保
url-loader或asset模块对@2x后缀有识别逻辑，否则打包后路径错乱
高 DPI 适配真正的难点不在代码量，而在判断依据——你得清楚当前问题到底是 viewport 失效、dpr 未覆盖、rem 基准漂移，还是图片资源缺失。这四个点各自独立又相互影响，漏掉任何一个，都会在特定设备上露出马脚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
