移动端视频字幕需用clamp(14px,3.6vmin,20px)+dvh定位+动画降级，禁用user-select，SVG设viewBox，图片加image-rendering，确保小屏清晰不遮挡不跳动。
移动端视频字幕要让小屏手机看得清、不遮挡、不跳动，关键不在“放大”，而在“可控缩放+精准定位+行为兜底”。单纯用 font-size: 16px 或 vw 很容易在 iPhone SE 和 Galaxy S24 上表现割裂，甚至被系统键盘或横屏推挤出界。
字号必须用 clamp() + vmin，且带 fallback
直接写 font-size: clamp(14px, 4vw, 20px) 在横屏时会拉得太宽，文字可能撑出视频区域。正确做法是：
- 用
vmin替代vw：横屏时取屏幕短边，避免单行过长，例如font-size: clamp(14px, 3.6vmin, 20px) - 必须前置 fallback：旧版 Safari 不支持
clamp()，得先写font-size: 16px，再覆盖 - 层级区分参数：标题字幕（如片名）可用
clamp(18px, 5vmin, 28px)，正文字幕用clamp(14px, 3.6vmin, 20px)，保持视觉比例 - 加
text-size-adjust: 100%到字幕容器（如.subtitle或.video-overlay），防 iOS 自动放大
位置与容器需用 dvh + max-height 防键盘/横屏错位
字幕常固定在视频底部，但安卓弹键盘、iOS 横屏时，vh 会卡在原始高度，导致字幕被顶出画面。解决方案是：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 包裹字幕的容器设
min-height: 100dvh; max-height: 100dvh，再配合overflow-y: auto（虽少用，但防极端内容） - 字幕绝对定位时，用
bottom: clamp(20px, 3vmin, 40px)替代固定bottom: 20px，适配不同安全区高度 - 为兼容旧浏览器，写双声明：
bottom: 20px; bottom: clamp(20px, 3vmin, 40px) - 视频父容器加
position: relative，确保absolute字幕始终锚定在视频内，而非整个页面
动画与行为要按设备能力降级
逐字飞入、淡入淡出等动画在低端安卓机上易掉帧，且小屏更重信息传达而非动效。建议：
- 小屏（
@media (max-width: 480px)）关闭复杂动画：animation: none，仅保留opacity渐显（GPU 加速） - 监听
prefers-reduced-motion：@media (prefers-reduced-motion: reduce) { .subtitle { animation: none; } } - 字幕出现延迟控制在 0.3–0.6s 内，避免小屏用户等待；消失延迟可略长（0.8s），提升可读余量
- 禁用
user-select: none——虽然防误触，但影响视障用户通过朗读工具操作
图片字幕或 SVG 字幕要额外处理缩放
若字幕以图片或 SVG 形式嵌入（如多语言图标+文字组合），不能只靠 max-width: 100%：
- SVG 字幕需设
width: 100%; height: auto;，并在根元素加viewBox（如viewBox="0 0 375 60"），确保等比缩放 - 图片字幕加
image-rendering: -webkit-optimize-contrast;防 iOS 模糊 - 所有字幕容器统一设
box-sizing: border-box，避免 padding/border 导致宽度溢出 - 测试真机横屏+键盘弹出场景，确认字幕是否仍完整显示在安全区域内（尤其 iPhone X 及以后机型）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
