阻止移动网页上的设备旋转 [英] Blocking device rotation on mobile web pages

问题描述

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

Is it possible to detect on my page, for example using Javascript, when user visit it using mobile device in portrait mode, and stop orientation changing when user rotate its phone to landscape? There is game on my page, optimized for portrait display only and I don't want it in landscape.

推荐答案

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

New API's are developing (and are currently available)!

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

和

screen.lockOrientation("orientation");

方向"在哪里可以是以下任何一种:

Where "orientation" can be any of the following:

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

portrait-primary - It represents the orientation of the screen when it is in its primary portrait mode. A screen is considered in its primary portrait mode if the device is held in its normal position and that position is in portrait, or if the normal position of the device is in landscape and the device held turned by 90° clockwise. The normal position is device dependant.

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

portrait-secondary - It represents the orientation of the screen when it is in its secondary portrait mode. A screen is considered in its secondary portrait mode if the device is held 180° from its normal position and that position is in portrait, or if the normal position of the device is in landscape and the device held is turned by 90° anticlockwise. The normal position is device dependant.

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

landscape-primary - It represents the orientation of the screen when it is in its primary landscape mode. A screen is considered in its primary landscape mode if the device is held in its normal position and that position is in landscape, or if the normal position of the device is in portrait and the device held is turned by 90° clockwise. The normal position is device dependant.

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

landscape-secondary - It represents the orientation of the screen when it is in its secondary landscape mode. A screen is considered in its secondary landscape mode if the device held is 180° from its normal position and that position is in landscape, or if the normal position of the device is in portrait and the device held is turned by 90° anticlockwise. The normal position is device dependant.

肖像 -它同时代表人像主和人像次要.

portrait - It represents both portrait-primary and portrait-secondary.

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

landscape - It represents both landscape-primary and landscape-secondary.

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

default - It represents either portrait-primary and landscape-primary depends on natural orientation of devices. For example, if the panel resolution is 1280800, default will make it landscape, if the resolution is 8001280, default will make it to portrait.

Mozilla 建议在屏幕上添加 lockOrientationUniversal 以使其更具跨浏览器兼容性.

Mozilla recommends adding a lockOrientationUniversal to screen to make it more cross-browser compatible.

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

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

Go here for more info (deprecated 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

Modern API docs in MDN is here: https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock

这篇关于阻止移动网页上的设备旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！