在移动浏览器上锁定屏幕方向

Question

我为手机（iphone和android）创建了一个网页（chrome和safari），我想将屏幕方向锁定为纵向模式。

与移动应用程序不同，网页没有清单文件和活动。

如何使用技术（css / javascript / bootstrap / jquery）或其他技术锁定手机的方向？

Answer 1

我为我的网络应用程序使用了一个清单文件，它在我的 Android 上锁定了 Chrome 的方向。无论出于何种原因，Safari 赋予其用户执行此操作的“权利”，而不是 Web 应用程序的设计者......感觉有点像侵犯版权之类的东西！;) 不要让我开始研究 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）在此处阅读有关清单的更多信息

Answer 2

根据我的测试，将 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 仍处于试验阶段，并非所有浏览器都支持。

Answer 3

您可以使用：

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