javascript - 强制 “landscape” 方向模式

Question

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

Answer 1

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

---

原答案:

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

您可以像这样使用 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
}

或者像这样绑定(bind)一个 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 list 。

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

您需要将这些行包含到 json 文件中:

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

并且您需要像这样将 list 包含到您的 html 文件中:

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

不确定 webapp list 上的锁定方向模式支持什么，但 Chrome 肯定存在。当我有信息时会更新。