109

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

4

4 回答 4

109

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

原答案：

您不能将网站或 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 manifest。

如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 肯定在那里。当我有信息时会更新。

于 2013-01-16T14:31:34.007 回答
51 
screen.orientation.lock('landscape');

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

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

于 2015-02-12T20:24:53.163 回答
38

我使用一些这样的 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;
  }
}
于 2019-09-22T02:34:08.147 回答
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"
  }
}

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

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

我的 PWA 效果很好，希望对您有所帮助！

于 2018-11-10T19:55:35.910 回答