投屏时表格模糊的根源是浏览器将表格作为位图拉伸，而非响应式渲染；应禁用transform/zoom，改用viewport+rem动态适配逻辑像素，并监听devicepixelratio变化重设font-size与重绘表格。
投屏时表格模糊，根本不是“分辨率没调高”，而是表格内容被浏览器用位图方式拉伸了——尤其是当投屏设备DPR≠1（比如4K电视、商用投影仪）时，table本身不响应物理像素，font-size、border、padding全按CSS像素渲染，结果就是文字发虚、边框锯齿、对齐错位。
投屏前必须禁用缩放类CSS属性
很多团队在投屏前临时加 transform: scale(1.5) 或 zoom: 1.2 想“放大看清”，这是最直接的清晰度杀手：
-
transform和zoom对table元素生效后，整个表格被当成一张位图重采样，字体、边框、阴影全部糊化 -
image-rendering: pixelated对表格无效，它只影响<img>和<canvas></canvas> - 真正该做的是让表格容器尺寸匹配投屏设备的逻辑像素，而不是强行拉伸
用 viewport + rem 动态适配投屏逻辑像素
投屏设备（如商用投影仪、会议大屏）常报告错误的 window.innerWidth，但 document.documentElement.clientWidth 通常可靠。关键不是“适配分辨率”，而是“适配当前显示区域的逻辑宽度”：
- 在投屏页顶部加
<meta name="viewport" content="width=device-width, initial-scale=1.0">，禁用缩放干扰 - 用 JS 动态设
html的font-size：取document.documentElement.clientWidth / 1920 * 16（以1920px为基准，16px为1rem） - 所有
table相关尺寸（font-size、padding、min-width）统一用rem，避免固定px导致小屏挤、大屏空 - 禁用
vw单位——投屏设备对视口单位支持不稳定，尤其多屏拼接时
表格自身结构要规避像素级依赖
模糊常发生在单元格内容溢出、自动换行或边框叠加处，本质是浏览器在非整数CSS像素下做亚像素渲染：
- 给
table加border-collapse: collapse，避免separate模式下边框双倍渲染 - 禁用
table-layout: auto；强制设table-layout: fixed，配合width: 100%和列宽col { width: 20% }，防止内容撑开导致重排糊化 - 文字不要靠
line-height做垂直居中——它在DPR≠1时易产生半像素偏移；改用display: flex; align-items: center容器 - 避免
background-image作为单元格底纹；若必须用，确保图片尺寸是物理像素整数倍（如 DPR=2 时提供 2x 图）
投屏切换时监听 devicePixelRatio 变更
从笔记本切到4K投影仪，window.devicePixelRatio 可能从1突变为2，但页面不会自动重绘——表格字体、边框粗细仍按旧DPR计算：
- 不能只监听
resize；必须用window.matchMedia('(resolution)')（注意：不是(min-resolution)）监听DPR变化 - 收到变更后，立刻重设
html的font-size，并触发table的redraw（简单做法是table.style.opacity = 0.99; table.offsetHeight; table.style.opacity = ''） - 如果用了第三方表格库（如 Ant Design Table），确认其是否支持
pixelRatio配置项；不支持就绕过，用原生table+ 上述策略更可控
投屏清晰度问题最后卡在“谁负责缩放”——浏览器不替你重绘表格，transform 是假放大，rem 动态适配才是真解法。最容易被忽略的是：投屏设备上报的 devicePixelRatio 常不准，得靠 getBoundingClientRect() 实测容器视觉尺寸反推，而不是盲目信 window.devicePixelRatio。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
