强制“景观”定位模式

我试图为我的应用程序强制使用“横向”模式，因为我的应用程序绝对不是为“纵向”模式设计的。 How can I do that?

165349 次浏览
小开
最佳答案

现在可以使用 HTML5 webapp 清单了。

原答案:

你不能锁定一个特定方向的网站或网络应用程序。它违背了设备的自然行为。

You can 侦查 the device orientation with CSS3 media queries like this:

@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 清单了。

正如在 Html5rocs.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 肯定在那里。等我有了信息会更新的。

小开 
screen.orientation.lock('landscape');

将强制它切换到并保持在横向模式。在 Nexus5上测试。

Http://www.w3.org/tr/screen-orientation/#examples

小开

我也遇到了同样的问题，它是一个丢失的 Manif.json 文件，如果没有找到浏览器，决定用方向是最好的，如果你没有指定文件或使用错误的路径。

我修正了在 html 头上正确调用 Manif.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">

And the manifest.json file content:

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

To generate your favicons and icons use this webtool: Https://realfavicongenerator.net/

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

我的 PWA 工程伟大，希望它的帮助！

小开

我使用一些类似的 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;
}
}

提交答案