javascript - 阻止移动网页上的设备旋转

Question

是否可以在我的页面上检测到，例如使用 Javascript，当用户使用纵向模式的移动设备访问它时，并在用户将手机旋转到横向时停止方向改变？我的页面上有游戏，仅针对纵向显示进行了优化，我不希望它横向显示。

Answer 1

新的 API 正在开发中(目前可用)!

screen.orientation.lock();   // webkit only

和

screen.lockOrientation("orientation");

其中“方向”可以是以下任何一种:

肖像为主 - 它代表屏幕处于主要纵向模式时的方向。如果设备保持在其正常位置且该位置为纵向，或者如果设备的正常位置为横向且设备顺时针旋转 90°，则屏幕被视为处于其主要纵向模式。正常位置取决于设备。

肖像辅助 - 它代表屏幕处于辅助纵向模式时的方向。如果设备从其正常位置保持 180° 且该位置为纵向，或者如果设备的正常位置为横向并且所持设备逆时针旋转 90°，则屏幕被视为处于其次要纵向模式。正常位置取决于设备。

风景为主 - 它表示屏幕处于主要横向模式时的方向。如果设备保持在其正常位置并且该位置处于横向状态，或者如果设备的正常位置处于纵向状态并且所持设备顺时针旋转 90°，则屏幕被视为处于其主要横向模式。正常位置取决于设备。

次要景观 - 它代表屏幕处于辅助横向模式时的方向。如果手持的设备与其正常位置成 180° 且该位置处于横向，或者如果设备的正常位置为纵向且手持的设备逆时针旋转 90°，则屏幕被视为处于其辅助横向模式。正常位置取决于设备。

肖像 - 它同时代表了 portrait-primary 和 portrait-secondary。

风景 - 它同时代表景观主要和景观次要。

默认 - 它表示纵向主要还是横向主要取决于设备的自然方向。例如，如果面板分辨率为 1280800，则默认为横向，如果分辨率为 8001280，则默认为纵向。

Mozilla 建议为 screen 添加 lockOrientationUniversal 以使其更加跨浏览器兼容。

screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;

转到此处了解更多信息(已弃用的 API):https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

---

MDN 中的现代 API 文档位于:https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock