强制"横向"方向模式

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 */
    }
});

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绝对存在.我有信息时会更新.

Answer 2

screen.orientation.lock('landscape');

将迫使它改变并保持横向模式.在Nexus 5上测试过.

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

Answer 3

I use some css like this (based on css tricks):

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}