移动端全屏视频锁屏需“api尝试+css兜底+用户引导”三层方案：先满足https、用户手势、全屏后立即锁屏三前提；ios因不支持screen.orientation需用css旋转模拟；退出时须解锁或还原样式。
移动端全屏视频播放时锁定屏幕方向，不能依赖单一方法，因为浏览器策略差异大——尤其是 iOS Safari 对 screen.orientation.lock() 完全不支持，而 Android Chrome 也只在特定条件下允许。真正可行的方案是“API 尝试 + CSS 视觉兜底 + 用户引导”三层配合。
先确保触发条件合法
锁屏请求必须满足三个硬性前提，否则直接失败：
- 页面必须运行在 HTTPS（或 localhost）安全上下文下
- 调用必须由用户手势触发（如点击播放按钮、触摸 video 控件），不能在
autoplay或loadeddata等自动事件中执行 - 需先成功进入全屏，再立即调用锁屏 —— 顺序不能错，且要监听
fullscreenchange事件确认状态
全屏后立即尝试锁定横屏
以 <video></video> 元素为例，推荐在用户点击“全屏”按钮后操作：
const video = document.getElementById('myVideo');
const fullscreenBtn = document.getElementById('fsBtn');
fullscreenBtn.addEventListener('click', async () => {
try {
await video.requestFullscreen();
// 等待全屏生效后再锁方向
document.addEventListener('fullscreenchange', async () => {
if (document.fullscreenElement) {
try {
await screen.orientation.lock('landscape-primary');
} catch (err) {
// 忽略 NotSupportedError（如 iOS）、NotAllowedError（未激活）等
}
}
}, { once: true });
} catch (err) {
console.warn('全屏失败:', err);
}
});
iOS 必须放弃 API，改用视觉模拟
iOS Safari 中 screen.orientation 为 undefined，任何 lock 调用都会报错或静默失效。此时应启用 CSS 旋转方案，仅在竖屏设备上生效：
@media screen and (orientation: portrait) and (max-device-width: 768px) {
body {
transform: rotate(90deg);
transform-origin: top left;
width: 100vh !important;
height: 100vw !important;
overflow: hidden;
}
video {
width: 100% !important;
height: auto !important;
}
}
注意：需配合 JS 监听 resize 或 orientationchange 事件，动态增删 class 控制旋转开关，避免横屏设备误转。
退出全屏时务必解锁或还原
若未手动处理，Android Chrome 可能残留锁定状态，导致后续页面无法正常旋转：
- 监听
fullscreenchange，当document.fullscreenElement === null时，调用screen.orientation.unlock() - iOS 不支持 unlock，但需移除旋转 class 或重置 body 样式
- 对 video 元素，建议在
webkitendfullscreen（iOS）和fullscreenchange（安卓）中统一清理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
