video标签仅设max-width: 100%不自适应，因高度未设height: auto导致宽高比破坏、小屏溢出或拉伸；须同时设置height: auto、父容器有明确宽度，并避免内联height；ios需webkit-playsinline与playsinline共存；现代项目优先用aspect-ratio，语义清晰简洁。
video标签加max-width: 100%为什么还不自适应？
因为只设width: 100%或max-width: 100%不够，浏览器会按原始尺寸渲染高度，导致小屏溢出、拉伸或出现横向滚动条。
- 必须同时写
height: auto，否则宽高比被破坏 - 不能在
<video></video>上写内联height="400"或style="height: 300px"，会覆盖CSS规则 - 父容器宽度必须明确（比如
div没设width又没内容撑开，max-width: 100%就无从计算） - iOS Safari 下若想点击后全屏，还得加
webkit-playsinline和playsinline两个属性，缺一不可
用aspect-ratio还是padding-bottom维持16:9？
现代项目优先用aspect-ratio，它语义清晰、代码简洁、无需绝对定位；但老版 Safari（
-
aspect-ratio: 16 / 9直接写在<video></video>父容器上，再配width: 100%; height: 100%，<video></video>设object-fit: cover或contain - 兼容写法：父容器设
position: relative; width: 100%; height: 0; padding-bottom: 56.25%，<video></video>用position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别把
aspect-ratio直接写在<video></video>上——部分浏览器不识别，且<video></video>本身不是块级容器，行为不稳定
移动端点一下就全屏，为什么总失败？
失败主因是自动播放策略+全屏权限未在用户手势上下文中触发，尤其 iOS Safari 最严格。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须用
click事件触发play()，且视频要带muted属性，否则play()直接被拒绝并抛NotAllowedError - 全屏不能只调
video.requestFullscreen()，得等play()Promise resolve 后再调，否则 Safari 拒绝 -
<meta name="viewport">里不能有user-scalable=no，否则 iOS Safari 禁用全屏API - 不要用
webkitEnterFullscreen()等私有方法，iOS 15+ 已统一支持标准requestFullscreen()
嵌入App内页时高度算不准怎么办？
App WebView 里document.body.offsetHeight常失真，真正可靠的参考是window.innerHeight——它返回的是当前可视区域高度，不含地址栏、状态栏等干扰。
- 用
window.innerHeight减去顶部播放器、底部tab等固定高度，剩余值赋给内容区style.height - 监听
resize事件重算，避免横竖屏切换后错位 - 别依赖
screen.height，它返回物理屏幕高度，包含系统UI占用空间，误差大 - 如果内容区需滚动，确保其父容器设
overflow-y: auto且高度已精确计算，否则滚动失效或页面整体滑动
muted和playsinline这对组合，以及aspect-ratio写错位置——它们不出错，但就是不生效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
