window.devicePixelRatio 是唯一可靠起点，viewport 元标签是基础底线；二者缺一不可，单靠 CSS 或 srcset 无法解决高分屏下 canvas 模糊、滚动条过细、鼠标坐标错位等核心问题。
window.devicePixelRatio 是唯一可靠起点，viewport 元标签是基础底线，缺一不可。 单靠 CSS 或图片 srcset 无法解决高分屏下 canvas 模糊、滚动条过细、鼠标坐标错位等核心问题。
viewport 元标签必须加，且 content 要写全
不加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，window.innerWidth 在 PC Chrome/Firefox 和安卓 Firefox 下返回物理像素宽，但在安卓 Chrome 下却返回 CSS 像素宽——同一份 JS 逻辑会因浏览器行为不一致而崩溃。
实操建议：
- 至少写
width=device-width, initial-scale=1.0；对大屏或 H5 应用，补上maximum-scale=1.0, user-scalable=no防止意外缩放 - three.js、Cesium.js 等图形库示例都默认带该标签，不是可选项，是运行前提
- 不要只在移动端加，2K/4K 笔记本桌面端同样需要，否则
resize事件中获取的尺寸和鼠标clientX/clientY会失真
canvas 渲染模糊？必须同步改 DOM 属性和 CSS 样式
Canvas 在 Retina 屏上发虚，90% 是因为只写了 canvas.style.width = "600px"，却没设 canvas.width。前者控制显示大小，后者决定绘图缓冲区分辨率——两者不匹配就等于拿 600×400 的图拉伸到 1200×800 显示。
实操建议：
- 初始化时读取
const dpr = window.devicePixelRatio || 1 - 按需设置：
canvas.width = Math.floor(600 * dpr)，canvas.height = Math.floor(400 * dpr) - 再配 CSS：
canvas.style.width = "600px"，canvas.style.height = "400px" - 绘图前务必调用
ctx.scale(dpr, dpr)，否则所有坐标、线宽都要手动乘 dpr，极易漏改 - 监听
resize和orientationchange，iOS 旋转后布局重排但dpr不变，必须重算
滚动条在高分屏上太细？用 rem + WebKit 私有属性双控
默认滚动条在 DPR=2 的屏幕上只有 4px 宽，手指点不准，视觉也模糊。WebKit 浏览器（Chrome/Safari/Edge）支持 ::-webkit-scrollbar，但宽度值需适配物理像素密度。
实操建议：
- 设
::-webkit-scrollbar { width: 12px; }（而非 8px），高分屏下 12px 才够点击 - 用
rem替代px：先在 JS 中根据dpr动态设document.documentElement.style.fontSize，再用width: 0.75rem控制滚动条宽 - Firefox 必须另配：
* { scrollbar-width: thin; scrollbar-color: #999 #f1f1f1; } - 避免在
@media (-webkit-min-device-pixel-ratio: 2)里写滚动条样式——Safari 对 zoom 缩放不响应该媒体查询，失效
img 和 background-image 的高清资源怎么选？别混用 srcset 和 -webkit-image-set()
srcset 适合单维度适配（只看像素密度），<picture></picture> 适合双维度（视口宽度 + 密度），而 CSS 背景图只能靠 -webkit-image-set()，三者不能互相替代。
实操建议：
-
<img src="icon.png" srcset="icon@2x.png 2x">：必须保留src作 fallback，否则老浏览器白屏 -
<picture><source media="(min-width:768px)" srcset="big@1x.jpg 1x, big@2x.jpg 2x"><img src="small.png"></source></picture>：先匹配media，再在匹配的<source></source>内按srcset选图 - CSS 中：
background-image: -webkit-image-set(url(icon.png) 1x, url(icon@2x.png) 2x);，Safari/Chrome 支持，Firefox 不支持，需额外 fallback - Webpack/Vite 构建时，静态资源未自动补
@2x后缀会导致 404，得配vite-plugin-imagemin或自定义 resolve 规则
真正麻烦的不是“怎么写”，而是不同场景下 window.devicePixelRatio 的行为差异：它在 Windows 缩放设置变更时会变，在 iOS Safari 中对页面 zoom 不响应，在 Electron 中可能被强制锁定——这些边界情况一旦漏测，上线后就是模糊的 canvas、点不中的滚动条、偏移的鼠标位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
