HTML5中可通过screen.orientation.lock()强制横屏，但仅HTTPS下用户手势触发时有效，iOS Safari不支持，需兼容提示和CSS视觉模拟。
在HTML5中，可以通过 ScreenOrientation 接口（配合 screen.orientation.lock()）尝试强制锁定移动端横屏，但需注意：该功能受浏览器支持、用户权限和运行环境严格限制，**仅在安全上下文（HTTPS）、全屏或用户交互触发后才可能生效**，且部分安卓/IOS浏览器（尤其Safari）不支持或仅支持有限方向。
确认设备与浏览器支持
并非所有环境都支持 orientation lock：
- Chrome for Android（80+）、Firefox for Android 支持
landscape-primary/landscape-secondary - iOS Safari 完全不支持
screen.orientation.lock()（返回NotSupportedError） - 必须在 HTTPS 环境下运行（localhost 也视为安全上下文）
- 部分安卓 WebView（如微信内置浏览器）会忽略锁屏请求
基础锁屏代码实现
需在用户手势（如点击按钮）后调用，不可在页面加载时自动执行：
document.getElementById('lockBtn').addEventListener('click', async () => {
try {
// 尝试锁定为横屏主方向（通常为左横屏）
await screen.orientation.lock('landscape-primary');
console.log('已锁定横屏');
} catch (err) {
console.warn('锁定失败：', err.name, err.message);
// 常见错误：NotAllowedError（未由用户手势触发）、NotSupportedError（不支持）、InvalidStateError（已全屏但未进入）
}
});
兼容性兜底与提示方案
因锁屏不可靠，建议结合 UI 引导提升体验：
立即学习“前端免费学习笔记（深入）”；
- 检测当前方向：
screen.orientation.type（如"portrait-primary"），实时监听变化：screen.orientation.addEventListener('change', handler) - 若锁屏失败，显示旋转提示层（含 CSS 动画箭头 + 文字：“请将手机横过来使用”）
- 对 iOS 用户单独提示：“iOS 暂不支持自动旋转，请手动旋转设备”
- 用 CSS 强制横屏布局（视觉模拟）：
@media (orientation: portrait) { body { transform: rotate(90deg); transform-origin: left top; width: 100vh; height: 100vw; } }（仅视觉旋转，非真锁屏）
注意事项与常见问题
避免踩坑的关键点：
- 不能在
DOMContentLoaded或load事件中直接调用 lock —— 必须由click、touchstart等用户激活事件触发 - 锁屏后，用户仍可通过系统手势（如安卓底部导航栏上滑）退出全屏，导致解锁；可监听
screen.orientation.onchange做恢复处理 - 调用
lock()前建议先检查screen.orientation.angle和type，避免重复锁定 - 退出时建议主动解锁：
screen.orientation.unlock()（例如页面卸载前或切换场景时）
