强制“横向”定向模式


91

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

Answers:


93

现在可以使用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肯定存在。有信息时将更新。


1
是的,webapp也是如此。即使您将网站“保存”到iPhone或iPad上的主屏幕,Web应用程序也会更改其方向。
雷米·布雷顿

2
根据caniuse.com,清单可从Android 4.1开始使用。见caniuse.com/#feat=offline-apps
雷米顿

1
我如何知道清单是否被调用?它对我不起作用,尽管清单与链接它的index.html放在同一位置,但我的开发工具的网络中未显示任何内容。
Ian S

3
现在,在Chrome中,您可以在检查模式下检查“应用程序”标签,其中有一个“清单”页面,该页面具有指向json文件及其相关信息的直接链接。
drskullster

1
@RémiBreton-您还在寻找该信息,因此您可以更新吗?我们已经耐心等待了多年!
ashleedawg

46
screen.orientation.lock('landscape');

将迫使其更改为并保持横向模式。在Nexus 5上进行了测试。

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


3
在使用默认互联网浏览器(非Chrome)的Android上无法正常工作-有任何想法吗?
Antonios Tsimourtos

6
未为Safari(iOS和macOS)实现:caniuse.com/#feat=screen-orientation
MBach

3
请注意,仅在进入全屏模式后才能使用。
塔娜·布里姆霍尔

2
Mozilla不建议使用此方法:developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation另外,它的浏览器兼容性也很差
Fernando Garcia,

1
在chrome中,这甚至无法在全屏模式下运行:|
Shamshirsaz.Navid

22

我使用这样的一些CSS(基于CSS技巧):

@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;
  }
}

3
我用了这个答案..我要做的就是将媒体查询从更改为landscapeportrait并且按预期方式工作@media screen and (orientation: portrait)
ymz

编辑了答案,以帮助未来的人们。当前模式为时应应用旋转portrait(以便可以切换到landscape)。
lfarroco

谢谢。我一直在寻找这样的东西。
弱者

我如何只能通过page-id-xxx将其应用于单个页面?
荷马

0

我遇到了同样的问题,这是一个缺少的manifest.json文件,如果找不到浏览器,则确定方向最佳,如果您不指定文件或使用错误的路径。

我修复了仅在html标头上正确调用manifest.json的问题。

我的html标头:

<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">

以及manifest.json文件内容:

{
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
  {
    "src": "android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
}

要生成您的网站图标和图标,请使用此网络工具:https ://realfavicongenerator.net/

要生成清单文件,请使用:https : //tomitm.github.io/appmanifest/

我的PWA很棒,希望对您有所帮助!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.