小编典典

强制“横向”定向模式

javascript

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


阅读 268

收藏
2020-05-01

共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肯定存在。有信息时将更新。

2020-05-01