强制“横屏”方向模式

Question

强制“横屏”方向模式

javascriptcssdevice-orientation

123

我正在尝试强制应用程序进入“横屏”模式，因为我的应用程序绝对不是为“竖屏”模式设计的。我该怎么做？

我该怎样强制应用程序运行时只允许在横屏模式下显示呢？

- user1599537

4个回答

54

screen.orientation.lock('landscape');

将其强制更改并保持横向模式。已在Nexus 5上测试。

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

- Crowbar

这种方法相对于其他方法更容易实现。 - Sarin Jacob Sunny

5

在Android上使用默认的互联网浏览器（非Chrome）无法正常工作 - 有什么想法吗？ - Antonios Tsimourtos

13

无法在Safari（iOS和macOS）中实现：https://caniuse.com/#feat=screen-orientation - MBach

7

简短说明，此功能仅在进入全屏模式后可用。 - Thane Brimhall

3

这种方法被 Mozilla 不推荐使用：https://developer.mozilla.org/zh-CN/docs/Web/API/Screen/lockOrientation 而且浏览器兼容性非常差。 - Fernando Garcia

1

这甚至在Chrome的全屏模式下也无法工作 :| - Shamshirsaz.Navid

53

我使用的一些 CSS 如下所示（基于 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;
  }
}

- pomber

3

我使用了这个答案... 我所要做的就是将媒体查询从“landscape”改为“portrait”，然后它按预期工作@media screen and (orientation: portrait)。 - ymz

编辑了答案以帮助未来的人们。旋转应该在当前模式为“竖屏”时应用（这样它就可以切换到“横屏”）。 - lfarroco

1

谢谢。我一直在寻找这样的东西。 - underdog

我如何通过页面ID（page-id-xxx）仅将其应用于单个页面？ - Homer

4

谢谢您！我发现您需要在所有CSS文件中将每个vh更改为vw，将每个vw更改为vh（在纵向模式下）...所以如果有人没有成功，可能是因为这个原因。 - tomer raitz

显示剩余5条评论

1

我曾经遇到同样的问题，那是因为缺少 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"
  }
}

使用此网络工具生成您的favicon和图标： https://realfavicongenerator.net/ 使用以下内容生成您的清单文件： https://tomitm.github.io/appmanifest/ 我的PWA运行良好，希望它能帮助到您！

- Miguel Montes de Oca

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rémi Breton · Accepted Answer

现在有了HTML5 网页应用程序清单，这是可能的。请参见下文。

原始回答：

您无法将网站或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网络应用清单实现。

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

不确定 Web 应用程序清单中支持锁定方向模式的具体情况，但 Chrome 明确支持。在我获得信息后会进行更新。