Android 在移动浏览器上锁定屏幕方向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26271203/
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
locking screen orientation on mobile browser
提问by dosth reddy
I create a web page(chrome & safari) for mobiles (iphone & android), I want to lock the screen orientation in portrait mode.
我为手机（iphone 和 android）创建了一个网页（chrome 和 safari），我想在纵向模式下锁定屏幕方向。
Unlike mobile apps,there is no manifest file and activity as it a web page.
与移动应用程序不同，它没有清单文件和活动，因为它是一个网页。
How to lock the orientation in mobiles using technologies (css/javascript/bootstrap/jquery) or any other?
如何使用技术（css/javascript/bootstrap/jquery）或任何其他技术锁定手机的方向？
回答by bcintegrity
I use a manifest file for my web app, which locks orientation for Chrome on my Android. For whatever reason, Safari gives their users the "right" to do this, but not the designers of the web app... Sort of feels like copyright infringement or something! ;) Don't get me started on Safari's disgraceful rewriting/rendering of input buttons!...
我为我的网络应用程序使用了一个清单文件，它在我的 Android 上锁定了 Chrome 的方向。无论出于何种原因，Safari 赋予其用户执行此操作的“权利”，而不是 Web 应用程序的设计者......感觉有点像侵犯版权之类的东西！;) 不要让我开始研究 Safari 对输入按钮的可耻重写/渲染！...
Anyways, back to the answer.
无论如何，回到答案。
1) Include a link to your manifest within the headsection of your page:
1) 在head您的页面部分中包含指向清单的链接：
<link rel="manifest" href="http://yoursite.com/manifest.json">
<link rel="manifest" href="http://yoursite.com/manifest.json">
2) Create your manifest file, "manifest.json"
2) 创建您的清单文件，“manifest.json”
{
"name":"A nice title for your web app",
"display":"standalone",
"orientation":"portrait"
}
3) Read more about manifests HERE
3）在此处阅读有关清单的更多信息
回答by Davide Arcinotti
From my tests, assigning the screen.lockOrientation ( every browser versions ) to a var throw an illegal invocation error. Just use wind.screen.orientation.lock('landscape'); . It
根据我的测试，将 screen.lockOrientation （每个浏览器版本）分配给 var 会引发非法调用错误。只需使用 wind.screen.orientation.lock('landscape'); . 它
EDIT: You can't use lock orientation on safari, cause it doesn't support fullscreen api at the moment http://caniuse.com/#feat=fullscreen. The lock orientation API NEED a fullscreen page to work. In Chrome, the window.screen.orientation.lock return a promise. So, AFTER you go fullscreen with the page, you can do something like this :
编辑：您不能在 safari 上使用锁定方向，因为它目前不支持全屏 api http://caniuse.com/#feat=fullscreen。锁定方向 API 需要全屏页面才能工作。在 Chrome 中， window.screen.orientation.lock 返回一个承诺。因此，在页面全屏显示后，您可以执行以下操作：
var lockFunction = window.screen.orientation.lock;
if (lockFunction.call(window.screen.orientation, 'landscape')) {
console.log('Orientation locked')
} else {
console.error('There was a problem in locking the orientation')
}
However, the lock orientation and fullscreen API are still experimental, not all browsers supports it.
但是，锁定方向和全屏 API 仍处于试验阶段，并非所有浏览器都支持。
回答by MFP
The lockOrientationmethod locks the screen into the specified orientation.
该lockOrientation方法锁屏到指定的方向。
lockedAllowed = window.screen.lockOrientation(orientation);
From the following code, you can check that orientation is locked or not.
从以下代码中，您可以检查方向是否已锁定。
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
if (lockOrientation("landscape-primary")) {
// orientation was locked
} else {
// orientation lock failed
}
see the following link, you will get idea from this.
看下面的链接，你会从中得到想法。
https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation
https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation
回答by Tran Quoc Hung
You can use:
您可以使用：
screen.addEventListener("orientationchange", function () {
console.log("The orientation of the screen is: " + screen.orientation);
});
and
screen.lockOrientation('landscape');
Following: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation
以下：https: //developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation
