强制“横向”方向模式

javascript css device-orientation

2022-08-30 05:25:46

我试图为我的应用程序强制使用“横向”模式，因为我的应用程序绝对不是为“纵向”模式设计的。我该怎么做？

答案 1

现在，HTML5 webapp 清单可以做到这一点。见下文。

原答：

您无法以特定方向锁定网站或 Web 应用程序。它违背了设备的自然行为。

您可以使用 CSS3 媒体查询检测设备方向，如下所示：

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

或者通过绑定一个 JavaScript 方向更改事件，如下所示：

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});

2014 年 11 月 12 日更新：现在可以使用 HTML5 web 应用清单。

如 html5rocks.com 中所述，您现在可以使用文件强制方向模式。manifest.json

您需要将这些行包含在 json 文件中：

{
    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...
}

您需要将清单包含在 html 文件中，如下所示：

<link rel="manifest" href="manifest.json">

不完全确定Web应用程序清单上对锁定方向模式的支持是什么，但Chrome肯定在那里。当我有信息时，将更新。

答案 2

screen.orientation.lock('landscape');

将强制它更改为并保持横向模式。在Nexus 5上测试。

http://www.w3.org/TR/screen-orientation/#examples