高分屏适配需分层处理：图片用srcset或按dpr/宽度双维度选源；canvas须同步width/height与css尺寸并scale缩放；滚动条宜用rem或media查询适配深色模式；window.devicepixelratio仅作轻量信号，不可替代媒体查询。
高分屏适配不是加个 srcset 就完事，关键得看你是只换图，还是连布局、字体、Canvas、滚动条都要一起调——不同环节用的机制完全不同，混着搞必出模糊、错位、404。
img 标签用 srcset 还是 <picture></picture>？看要不要切宽度 + 密度双重条件
只按设备像素比（DPR）选图，比如手机和桌面都用同一张 banner，但 Retina 屏要加载 @2x.jpg，那就用 srcset 配 2x 语法，简单直接：
@@##@@
但如果你还要按视口宽度切图（比如手机加载 400w 图、平板 800w、桌面 1200w），同时每档再分 1x/2x，就必须上 <picture></picture>：
- 浏览器先匹配
<source media="(min-width: 768px)"></source>，再在该<source></source>内部按srcset选 1x 或 2x - 没匹配到任何
<source></source>时，才 fallback 到<img src="icon.png" srcset="icon@2x.png 2x, icon@3x.png 3x">的src，所以<img>必须存在且可用 - Webpack/Vite 构建时，静态资源路径不会自动补
@2x后缀，icon@2x.png404 是常见问题，得靠插件（如vite-plugin-imagemin）或手动配置 resolve 规则
Canvas 渲染模糊？90% 是没同步改 width/height 属性
Canvas 模糊不是 CSS 没写对，是绘图缓冲区尺寸和显示尺寸不一致。CSS 控制的是“怎么显示”，canvas.width 和 canvas.height 才决定“画多大”。
- 错误写法：
canvas.style.width = '300px'; canvas.style.height = '200px';—— 缓冲区仍是默认 300×150，拉伸后必然糊 - 正确做法：用
window.devicePixelRatio动态算缓冲区尺寸：canvas.width = Math.floor(300 * dpr); canvas.height = Math.floor(200 * dpr);，再设 CSS 宽高回 300×200 - 绘图前别忘
ctx.scale(dpr, dpr)，否则所有坐标（比如ctx.fillRect(10, 10, 20, 20)）都得手动乘dpr - 监听
resize和orientationchange，iOS 旋转后dpr不变但布局重排，容易漏重设
滚动条在 4K 屏上细得点不中？别硬写 px
高分屏下 ::-webkit-scrollbar { width: 8px } 会显得过细、反光、难点击，尤其 DPI 缩放为 125%/150% 时更明显。
- 宽度建议设成
10px～14px，12px是较稳妥的起点 - 避免用固定
px，可改用rem：根元素font-size设为16px时，width: 0.75rem≈12px，缩放时能跟随 - Firefox 不认 WebKit 属性，必须加兜底：
* { scrollbar-width: thin; scrollbar-color: #999 #f1f1f1; } - 深色模式下轨道/滑块颜色可能不可见，用
@media (prefers-color-scheme: dark)单独调色
window.devicePixelRatio 是 JS 层唯一可靠信号，但别只靠它做全部判断
它返回物理像素与 CSS 像素比值（Mac Retina 是 2，iPhone 14 Pro 是 3），是 JS 层最轻量、无需 polyfill 的高分屏入口。但它有局限：
- 页面缩放时会变（Chrome/Firefox 支持，Safari 部分版本不响应 zoom 变化），不能当作静态常量缓存
- 仅反映像素密度，不反映视口宽度或设备类型，不能替代媒体查询做布局断点
- Electron 环境或某些 WebView 中，
dpr可能始终为 1，得配合window.innerWidth和 UA 字符串交叉验证 - 它适合做资源加载决策（比如加载
@2x图、缩放 Canvas）、微调边框粗细，但不适合控制整页布局或字体层级
真正容易被忽略的是：Canvas 重绘、滚动条尺寸、图片 fallback 路径这三处，一个没对齐，用户一眼就能看出糊或错位——它们不共享同一套适配逻辑，得各自单独处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
