强制“横向”方向模式 [英] Force “Landscape” orientation mode

问题描述

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

I'm trying to force the "Landscape " mode for my application because my application is absolutely not designed for the "portrait" mode. How can I do that ?

有什么建议吗？
谢谢

any suggestions ? thanks

推荐答案

现在可以使用HTML5 webapp清单。见下文。

原始答案：

您无法以特定方向锁定网站或Web应用程序。这与设备的自然行为背道而驰。

You can't lock a website or a web application in a specific orientation. It goes against the natural behaviour of the device.

您可以使用CSS3媒体查询检测设备方向：

You can detect the device orientation with CSS3 media queries like this:

@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方向更改事件：

Or by binding a JavaScript orientation change event like this:

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

---

11月12日更新：它是现在可以使用HTML5 webapp清单。

如 html5rocks.com ，您现在可以使用清单强制定位模式.json file。

As explained on html5rocks.com, you can now force the orientation mode using a manifest.json file.

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

You need to include those line into the json file:

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

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

And you need to include the manifest into your html file like this:

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

不完全确定webapp清单上的支持对于锁定定位模式，但Chrome绝对存在。我有信息时会更新。

Not exactly sure what the support is on the webapp manifest for locking orientation mode, but Chrome is definitely there. Will update when I have the info.

这篇关于强制“横向”方向模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！