我为手机（iphone 和 android）创建了一个网页（chrome 和 safari），我想将屏幕方向锁定为纵向模式。
与移动应用不同，没有清单文件和活动，因为它是一个网页。
如何使用技术（css/javascript/bootstrap/jquery）或任何其他技术锁定手机中的方向？
【问题讨论】：
标签： android google-chrome screen mobile-safari screen-orientation
lockOrientation 方法将屏幕锁定到指定的方向。
lockedAllowed = window.screen.lockOrientation(orientation);
通过以下代码，您可以检查方向是否已锁定。
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
if (lockOrientation("landscape-primary")) {
// orientation was locked
} else {
// orientation lock failed
}
看下面的链接，你会从中得到灵感。
https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation
【讨论】：
我为我的网络应用程序使用了一个清单文件，该文件在我的 Android 上锁定了 Chrome 的方向。无论出于何种原因，Safari 都赋予用户“权利”这样做，但网络应用程序的设计者却没有……感觉像是侵犯版权之类的！ ;) 不要让我开始讨论 Safari 对输入按钮的可耻重写/呈现！...
无论如何，回到答案。
1) 在页面的 head 部分中包含指向清单的链接：
<link rel="manifest" href="http://yoursite.com/manifest.json">
2) 创建清单文件“manifest.json”
{
"name":"A nice title for your web app",
"display":"standalone",
"orientation":"portrait"
}
3) 阅读有关清单的更多信息HERE
【讨论】：
根据我的测试，将 screen.lockOrientation（每个浏览器版本）分配给 var 会引发非法调用错误。只需使用 wind.screen.orientation.lock('landscape'); .它
编辑：您不能在 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')
}
但是，锁定方向和全屏 API 仍处于试验阶段，并非所有浏览器都支持它。
【讨论】：
你可以使用：
screen.addEventListener("orientationchange", function () {
console.log("The orientation of the screen is: " + screen.orientation);
});
and
screen.lockOrientation('landscape');
关注：https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation
【讨论】：