高分辨率投影设备需按物理尺寸而非像素适配：强制 viewport 锁定缩放，用 mm/cm 定义字号与间距，按钮热区≥12mm×12mm，禁用 hover 改用 active 反馈，并须真机多品牌交叉测试。
高分辨率投影设备（如 4K/5K 教室投影仪、会议一体机、数字标牌）不是“大屏桌面”，而是“远距+低 DPI + 高像素密度 + 固定视角”的特殊终端。直接套用桌面断点或 100vw 布局，常导致文字过小、按钮难触达、间距被拉散、阴影/边框发虚——这不是适配失败，是结构假设错了。
为什么 @media (min-width: 1920px) 在投影仪上失效
投影设备的真实渲染宽度 ≠ 物理像素宽度。浏览器报告的 window.innerWidth 可能是 3840，但因系统缩放（如 Windows 的 150%）、DPI 感知缺失或驱动层插值，CSS 中的 1rem 或 16px 实际物理尺寸可能只有 0.2mm，肉眼几乎无法辨识。
- 不要依赖
device-pixel-ratio判断——投影仪驱动常伪造该值为 1 或 2，不可信 - 避免用
vh/vw做关键字号或按钮尺寸：投影距离导致视场角变化，10vh在 3 米 vs 8 米投射下物理高度差 3 倍 - Chrome/Firefox 对投影屏的
resolution媒体特性支持极差，基本不可用
viewport 必须显式覆盖缩放行为
默认 viewport 元标签在投影仪上极易触发浏览器自动缩放，把本该占满画面的内容压缩成左上角一小块。必须强制禁用用户缩放并锁定物理尺寸映射：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
更关键的是追加一行：
<meta name="viewport" content="target-densitydpi=device-dpi">
（仅 Android 投影系统有效，但多数教育/商用投影仪底层是定制 Android 系统）
- 若使用 Electron 或 WebView 容器，需在启动参数中设
--force-device-scale-factor=1 - Windows 10/11 投影模式下，CSS 的
zoom属性会被忽略，改用transform: scale()+transform-origin精控
字体与间距必须基于物理尺寸而非像素
投影场景下，可读性取决于毫米级物理尺寸，不是 CSS 像素数。直接写 font-size: 24px 在 4K 投影上可能只有 0.3mm 高——比印刷体五号字还小。
- 用
cm或mm单位定义基础字号：html { font-size: 3.2mm; }（实测 3.2mm 在 3–5 米距离最易读） - 所有 padding/margin 用
em或rem，确保随基础字号线性放大 - 慎用
rem配合根元素动态计算——投影仪 JS 获取screen.width常返回错误值，建议服务端注入真实物理 DPI 参数
交互区域要按“远距点击”重定义
投影环境下，用户用激光笔、遥控器或隔空手势操作，不是鼠标悬停或手指触摸。悬停效果无意义，最小点击热区必须 ≥ 12mm × 12mm（非像素）。
- 按钮
min-width/min-height设为12mm，内边距也用mm单位 - 移除所有
:hover样式，改用:active+transform: scale(0.95)提供明确按压反馈 - 避免细线边框（
border: 1px solid），改用border: 0.2mm solid或阴影模拟立体感
真正麻烦的不是代码怎么写，而是你没法在开发机上准确预览——投影仪的 gamma、色域、亮度衰减会彻底改变视觉权重。上线前必须真机投到实际墙面距离测试，且至少换三台不同品牌投影仪交叉验证。否则再完美的 CSS，在教室后排第三排学生眼里，就是一片模糊的灰块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
