HTML怎么做屏幕方向锁定_HTML Screen Orientation屏幕锁定【快速上手】

iOS Safari完全不支持Screen Orientation API，调用screen.orientation.lock()会抛出NotSupportedError或静默失败；仅Android Chrome、Firefox桌面版等支持，且需用户手势触发。

Screen Orientation API 不支持 iOS Safari

先说一个让不少开发者头疼的结论：在iOS Safari上，包括所有基于WebKit内核的浏览器，想用screen.orientation.lock()来锁定屏幕方向？这条路从一开始就是堵死的。调用这个API，要么直接抛出NotSupportedError错误，要么就干脆静默失败，没有任何反应。这可不是什么配置问题或者代码写错了，而是苹果公司压根就没有在iOS的WebKit中实现这个API。如果你的用户群里包含iPhone或iPad用户，那么任何依赖这个API来实现“横屏锁定”功能的逻辑，在iOS上都会完全失效。

具体表现是怎样的呢？当你尝试执行screen.orientation.lock('landscape')时，在iOS上，返回的Promise会直接被reject，或者干脆没有任何响应。同时，screen.orientation.type这个属性会始终显示为"portrait-primary"，即使你已经把设备物理旋转到了横屏状态，它也纹丝不动。

• 目前，只有Android上的Chrome、桌面版的Firefox、以及采用Chromium内核的新版Edge等较新的浏览器，才完整支持这套API。
• 在iOS上，开发者能做的干预非常有限，基本上只剩下调整viewport的meta标签——但那仅仅是一种“建议”，无法强制锁定屏幕方向。
• 即便是将Web App添加到主屏幕，变成所谓的“类原生应用”，这个限制依然存在，不会改变。

Android 上 lock() 调用必须由用户手势触发

即便在支持的Android设备上，screen.orientation.lock()也不是想调就能调的。它是一个受权限约束的异步操作，必须在用户主动交互的上下文环境中调用。具体来说，就是得绑定在用户的点击、触摸、键盘按键这类“可信任事件”的回调函数里。否则，浏览器会出于安全考虑，立即拒绝你的请求，并抛出一个SecurityError: The operation is insecure的错误。

哪些是典型的错误写法呢？比如在页面的onload事件里调用、用setTimeout延时调用、或者在某个组件挂载后自动调用——这些上下文都不算用户手势，统统会触发安全错误。

立即学习“前端免费学习笔记（深入）”；

• 正确的做法是，把它绑定到一个按钮的onclick或ontouchstart事件上。举个例子：

  进入横屏模式
  

• 还有一点需要注意：在同一页面中，多次调用lock()可能会被浏览器忽略。稳妥的做法是，在重新锁定前，先调用一次unlock()。
• 另外，在一些特定的Android系统（比如某些旧版本的MIUI）上，调用时可能会弹出系统级的权限确认提示。如果用户在这里点了拒绝，那么后续的所有调用都会失败。

替代方案：CSS + JS 模拟横屏体验（iOS 可用）

既然原生API在iOS上此路不通，那么务实的选择就是：放弃“系统级锁定”这个执念，转而用视觉和交互的手段，来模拟出横屏的体验。核心思路就是旋转页面容器、禁用滚动、并重新适配触控区域。

技术上，我们可以监听window.orientation变化（这个API虽然已废弃，但在iOS上仍然可用），或者使用更现代的matchMedia('(orientation: landscape)')来检测方向。然后，通过CSS的transform: rotate(90deg)来旋转整个视觉区域，并动态调整viewport的缩放比例，让内容适配屏幕。

• 一段关键的核心CSS代码可能长这样：

  .landscape-simulated {
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    position: absolute;
    top: 0;
    left: 0;
  }

• 在Ja vaScript部分，务必使用matchMedia('(orientation: landscape)')来监听方向变化，而不是去依赖那个不靠谱的screen.orientation对象。
• 同时，一定要设置好viewport的meta标签，例如：。否则，在旋转后，页面缩放很容易失控。
• 这里有个容易踩的坑：在移动设备上，软键盘的弹出和收起有时也会触发方向变化事件，需要额外处理输入框聚焦时的逻辑，避免页面布局错乱。

判断是否真正支持 lock() 的安全检测方式

如何判断当前环境是否真的支持锁定屏幕方向呢？千万别只用'orientation' in screen这种简单的属性判断。因为即使在iOS上，screen.orientation这个对象也是存在的，只是它的lock方法不可用而已。最可靠的检测方式，是结合try/catch进行实际的功能调用测试。

下面是一个推荐的检测函数：

async function canLockOrientation() {
  if (!screen.orientation || !screen.orientation.lock) return false;
  try {
    await screen.orientation.lock('portrait');
    await screen.orientation.unlock();
    return true;
  } catch (e) {
    return false;
  }
}

这个函数会在真正支持锁屏的Android设备上返回true，而在iOS上返回false。而且，它通过先锁定再立即解锁的方式，不会污染设备当前的方向状态，非常安全。

需要警惕的是，某些特殊环境，比如一些安卓系统内置的WebView（例如旧版微信内置浏览器），虽然也暴露了lock方法，但实际调用时会静默失败。所以，基于运行时的实际功能检测，远比单纯依靠User-Agent字符串来判断要可靠得多。