强制“横向”定向模式

Question

我试图对我的应用程序强制使用“横向”模式，因为我的应用程序绝对不是针对“人像”模式设计的。我怎样才能做到这一点？

Answer 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 Webapp清单现在可以实现。

如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">

不能完全确定webapp清单中支持定向模式的支持，但是Chrome肯定存在。有信息时将更新。