需按物理观看距离校准字号/间距/对比度，而非仅适配分辨率；4k投影dpr高致文字发虚，应设initial-scale=1、用min-resolution媒体查询；flex/grid换行改用vw单位；poster和字幕需响应式处理；aspect-ratio失效时用@supports回退padding-top方案。
viewport 设置不匹配投影设备 DPI 会导致文字发虚
高分辨率投影设备（如 4K 教室投影仪、激光电视）常被识别为「大屏桌面」，但实际 DPR（devicePixelRatio）可能高达 2.0–3.0，而默认 viewport 仅按逻辑像素缩放，没触发高清渲染路径，结果就是字体边缘模糊、图标锯齿明显。
关键不是加 maximum-scale，而是让浏览器知道“这台设备能显示更多物理像素”：
- 必须保留
initial-scale=1，禁用user-scalable=no（否则 Safari 会降级为 1x 渲染） - 在 CSS 中显式声明
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)块，重置关键字体和边框 - 避免用
px写 icon 或 border：改用0.5px配合transform: scale(2)模拟高清线，或直接用 SVG
flex/grid 容器在投影模式下换行错乱
投影设备视口宽度常达 3840px+，但内容区域仍按 1200px 设计，flex-wrap: wrap 在超宽屏上可能把三列布局撑成一列——因为 min-width: 300px 在 4K 下只占 1/12，根本不会触发换行。
解决方案不是加断点，而是改用「内容驱动」的换行逻辑：
- 把
flex: 1 1 300px改为flex: 1 1 25vw，让基础宽度随视口动态变化 - 对卡片类容器加
max-width: min(1200px, 80vw)，既防过宽拉伸，又保投影下留白合理 - 慎用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))))——在 4K 投影下会生成 12+ 列，改用repeat(auto-fill, minmax(320px, 1fr)))并配合grid-auto-flow: dense
poster 和字幕 track 在投影仪上显示偏小或裁切
video 的 poster 图片若按手机尺寸切图（如 640×360），投到 100 英寸幕布上就会像素化；track 字幕若用固定 font-size: 16px，在 4 米观看距离下几乎不可读。
需分层控制：
-
poster必须提供至少两套：一套1920x1080（用于投影），一套640x360（用于移动端），用<picture></picture>包裹，通过media="(min-width: 1920px)"切换 - 字幕样式不能写死
px，改用font-size: clamp(1.2rem, 4vw, 2.5rem)，确保最小可读性（≥24px）且投影时不溢出 - 避免
position: absolute定位字幕，改用bottom: 5vh+left: 5vw，适配不同投射比例
CSS aspect-ratio 在老款教育投影仪上失效
部分内置 Android 系统的教育投影仪（如 2021 款鸿合、希沃）使用旧版 WebView（Chromium 75–80），不支持 aspect-ratio，导致 video 或卡片容器高度塌陷。
回退方案必须生效，且不能靠 JS 检测：
- 用
@supports not (aspect-ratio: 16/9)包裹 padding-top 方案，避免现代浏览器重复计算 - padding-top 值要精确：16:9 →
padding-top: 56.25%，4:3 →padding-top: 75%，别四舍五入 - 包裹容器必须设
position: relative，内部video设position: absolute+inset: 0，否则 IE11 兼容模式下会错位
投影场景最易被忽略的是「内容密度」——不是越高清越好，而是要在 3 米外看清标题、2 米外辨清按钮。所有字号、间距、对比度都要按物理观看距离校准，而不是屏幕分辨率。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
