大屏投影文字发虚、边框锯齿、图表错位的根源是dpr与浏览器渲染管线不匹配导致物理像素对齐失效，须强制canvas/svg/css像素落于整数物理像素：canvas需重设width/height并调用ctx.scale(dpr,dpr)，svg需加shape-rendering="crispedges"和vector-effect="non-scaling-stroke"，rem基准必须math.round取整，且禁用initial-scale动态修改。
大屏投影时 HTML 页面出现文字发虚、边框锯齿、图表错位，根本不是“分辨率没设对”，而是投影设备的 DPR（devicePixelRatio）和浏览器渲染管线不匹配导致的物理像素对齐失效。必须让 canvas、SVG、CSS 像素全部落到整数物理像素上，否则再高的原始分辨率也白搭。
Canvas 地图或图表在投影仪上模糊必须重设 width/height
只改 canvas.style.width 和 canvas.style.height 是常见错误——它只缩放显示层，内部绘图坐标系仍按旧物理像素运行，结果就是瓦片偏移、抗锯齿全开但线条发毛。
- 每次窗口 resize 或
matchMedia('(resolution)')触发时，都得重算：canvas.width = Math.round(canvas.clientWidth * window.devicePixelRatio)，canvas.height = Math.round(canvas.clientHeight * window.devicePixelRatio) - 紧接着必须调用
ctx.scale(dpr, dpr)，否则所有fillRect(0,0,10,10)都会画成 5×5 物理像素宽的模糊块 - 别依赖父页 JS 注入：投影仪可能触发独立的
window.devicePixelRatio（比如 Windows 投影模式下常为 1.25 或 1.5），iframe 内的 canvas 必须自己读自己的window.devicePixelRatio
SVG 图标或线条在大屏上边缘发虚要禁用插值
SVG 默认启用平滑抗锯齿，但在 1920×1080 投影到 4K 激光投影仪时，浏览器会把 1px 线条插值拉伸成 1.333 物理像素宽，肉眼可见灰边。
- 给 SVG 根元素加
shape-rendering="crispEdges"，强制关闭几何插值 - 避免用
stroke-width: 1px，改用stroke-width: 1（无单位），再配合vector-effect="non-scaling-stroke"防止缩放时线宽变化 - 如果 SVG 是通过
<img>引入的，必须提供 @2x/@3x 版本并用srcset，否则浏览器永远只加载 1x 资源再拉伸
rem 基准字体非整数导致所有 border/padding 锯齿
很多大屏项目用 document.documentElement.clientWidth / 7.5 算 rem，但在 1920px 宽投影仪上得到 256.00000000000003，这个非整数基准会让 border: 1rem 渲染成 256.00000000000003 物理像素宽——亚像素栅格化直接糊边。
- 必须取整：
Math.round(document.documentElement.clientWidth / 7.5)，且只在resize后执行一次，避免抖动 - 禁用
initial-scale动态修改：一旦 JS 改了viewport的scale，clientWidth就不可信，DPR 计算全崩 - 检查是否用了
vw做 font-size：iOS Safari 10 以下不支持，而某些老旧投影仪内置浏览器正是这个内核
真正卡住大屏适配的，从来不是“怎么写响应式”，而是谁在控制最终落在屏幕上的每一个物理像素——window.devicePixelRatio 可能每切一次投影源就变一次，canvas.width 必须同步重置，rem 基准必须是整数，连 SVG 的 shape-rendering 都得显式关掉平滑。漏掉其中任意一环，投影出来的就是一张带灰边、发虚、错位的“高清幻灯片”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
