【发布时间】：2013-01-16 14:25:29
【问题描述】：
我正在尝试为我的应用程序强制使用“横向”模式，因为我的应用程序绝对不是为“纵向”模式设计的。 我怎样才能做到这一点？
【问题讨论】：
标签： javascript device-orientation
【发布时间】：2013-01-16 14:25:29
【问题描述】：
现在可以使用 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 网络应用清单。
如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 肯定在那里。当我有信息时会更新。
【讨论】：
-
是的，webapps 也是如此。即使您将网站“保存”到 iPhone 或 iPad 的主屏幕上，网络应用程序也会改变其方向。
-
根据 caniuse.com，从 Android 4.1 开始就可以使用清单。见caniuse.com/#feat=offline-apps
-
如何判断清单是否被调用？它对我不起作用，尽管清单与其链接的 index.html 位于同一位置，但我的开发工具的网络中没有显示任何内容。
-
在 Chrome 中，您现在可以在检查模式下检查“应用程序”选项卡，有一个“清单”页面，其中直接链接到您的 json 文件及其相关信息。
-
@RémiBreton - 你还在寻找那个信息，所以你可以更新吗？我们已经耐心等待了 年！
screen.orientation.lock('landscape');
将强制它更改为并保持在横向模式。在 Nexus 5 上测试。
【讨论】：
-
无法在 Android 上使用默认的互联网浏览器（不是 chrome） - 有什么想法吗？
-
未针对 Safari（iOS 和 macOS）实现：caniuse.com/#feat=screen-orientation
-
请注意，这仅在进入全屏模式后有效。
-
Mozilla 不鼓励这种方法：developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation 浏览器兼容性也很差
-
这在 chrome 中甚至无法在全屏模式下工作：|
我使用一些像这样的 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;
}
}
【讨论】：
-
我使用了这个答案.. 我所要做的就是将媒体查询从
landscape更改为portrait，它按预期工作@media screen and (orientation: portrait) -
编辑了答案以帮助未来的人们。当前模式为
portrait时应应用旋转（以便可以切换到landscape）。 -
谢谢。我一直在寻找这样的东西。
-
如何通过 page-id-xxx 仅在单个页面上应用它？
-
谢谢你！我发现您需要将所有 CSS 文件（纵向模式）中的每个
vh更改为vw和vw更改为vh......所以如果有人没有成功，可能是因为它。
我有同样的问题，它是缺少 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 效果很好，希望对您有所帮助！
【讨论】：