Javascript 强制“横向”定向模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14360581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force “landscape” orientation mode
提问by user1599537
I'm trying to force the "landscape" mode for my application because my application is absolutely not designed for the "portrait" mode. How can I do that?
我正在尝试为我的应用程序强制使用“横向”模式，因为我的应用程序绝对不是为“纵向”模式设计的。我怎样才能做到这一点？
回答by Rémi Breton
It is now possible with the HTML5 webapp manifest. See below.
现在可以使用 HTML5 webapp manifest。见下文。
Original answer:
原答案：
You can't lock a website or a web application in a specific orientation. It goes against the natural behaviour of the device.
您无法以特定方向锁定网站或 Web 应用程序。它违背了设备的自然行为。
You can detectthe device orientation with CSS3 media queries like this:
您可以使用 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
}
Or by binding a JavaScript orientation change event like this:
或者通过像这样绑定一个 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 */
}
});
Update on November 12, 2014: It is now possible with the HTML5 webapp manifest.
2014 年 11 月 12 日更新：现在可以使用 HTML5 webapp manifest。
As explained on html5rocks.com, you can now force the orientation mode using a manifest.jsonfile.
如html5rocks.com 所述，您现在可以使用manifest.json文件强制定向模式。
You need to include those line into the json file:
您需要将这些行包含在 json 文件中：
{
"display": "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
"orientation": "landscape", /* Could be "landscape" or "portrait" */
...
}
And you need to include the manifest into your html file like this:
您需要将清单包含在您的 html 文件中，如下所示：
<link rel="manifest" href="manifest.json">
Not exactly sure what the support is on the webapp manifest for locking orientation mode, but Chrome is definitely there. Will update when I have the info.
不确定 webapp manifest 对锁定方向模式的支持是什么，但 Chrome 肯定存在。当我有信息时会更新。
回答by Crowbar
screen.orientation.lock('landscape');
Will force it to change to and stay in landscape mode. Tested on Nexus 5.
将强制它更改为并保持横向模式。在 Nexus 5 上测试。
回答by pomber
I use some css like this (based on css tricks):
我使用了一些这样的 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;
}
}
回答by Miguel Montes de Oca
I had the same problem, it was a missing manifest.json file, if not found the browser decide with orientation is best fit, if you don't specify the file or use a wrong path.
我遇到了同样的问题，这是一个缺少 manifest.json 文件，如果没有找到，浏览器会根据方向决定最适合，如果您不指定文件或使用错误的路径。
I fixed just calling the manifest.json correctly on html headers.
我修复了在 html 标头上正确调用 manifest.json 的问题。
My html headers:
我的 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:
和 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"
}
}
To generate your favicons and icons use this webtool: https://realfavicongenerator.net/
要生成您的网站图标和图标，请使用此网络工具：https://realfavicongenerator.net/
To generate your manifest file use: https://tomitm.github.io/appmanifest/
要生成您的清单文件，请使用：https: //tomitm.github.io/appmanifest/
My PWA Works great, hope it helps!
我的 PWA 效果很好，希望能帮到你！
