阻止移动网页上的设备轮换 [英] 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");

orientation可以是以下任何一种：

Where "orientation" can be any of the following:

portrait-primary -
它表示屏幕处于主要纵向模式时的方向。如果设备处于正常位置且该位置处于纵向状态，或者设备的正常位置处于横向状态且设备顺时针旋转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.

landscape-primary -
它表示屏幕在其主要位置时的方向景观模式。如果设备处于正常位置并且该位置处于横向状态，或者如果设备的正常位置是纵向并且设备保持顺时针旋转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.

landscape-secondary -
它表示屏幕在其辅助时的方向景观模式。如果设备保持与其正常位置成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.

默认 -
它代表portrait-primary和landscape-primary取决于设备的自然方向。例如，如果面板分辨率为1280 * 800，则默认设置为横向，如果分辨率为800 * 1280，则默认设置为纵向。

default - It represents either portrait-primary and landscape-primary depends on natural orientation of devices. For example, if the panel resolution is 1280*800, default will make it landscape, if the resolution is 800*1280, 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;

返回此处获取更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

Go here for more info: https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

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