时间戳

首页 > 解决方案 > 如何在浏览器的 web 应用程序中强制横向

javascript - 如何在浏览器的 web 应用程序中强制横向

问题描述

我有一个在 Android 上的 chrome 网络浏览器中运行的网络应用程序。
我想将方向锁定为横向。

我根据本教程尝试了几个选项：
使用 ScreenOrientation.lock()，这是实验性的。此处的示例代码在我的手机（Pixel3，Android 11）中不起作用 - 当设备旋转时，方向会发生变化。

我还尝试了一个 CSS 技巧，如果它检测到设备处于纵向模式，它将屏幕旋转 90 度。在简化示例中
， 屏幕以横向模式呈现，但实际应用程序的功能被破坏。例如，当在 x 方向上移动手指时，会被解释为在 y 方向上移动。

我的 Pixel3 手机在 Android 的 Chrome 中的其他尝试也失败了（旋转设备时方向会改变）

我可以通过将页面安装为 PWA“添加到主屏幕”并使用清单来锁定方向

cat manifest.json
  "display": "standalone",
  "orientation": "landscape",

但这需要用户将应用安装为PWA

我想在 webapp 在常规浏览器中运行时锁定它的方向。
这可能吗？

谢谢

标签： javascriptandroidiosorientation

解决方案

您可以做的最好的选择是生成一个popup不允许输入的简单内容，即；覆盖屏幕。然后使用下面的代码【可以更好的微调】来检测用户是处于纵向还是横向模式。

setTimeout(() => {
  if(window.innerHeight > window.innerWidth){
    document.body.getElementById('custom-popup').classList.add('show');
    // Obviously you'd have to make a popup that is visible when the class 'custom-popup` is added.
  } else {
    document.body.getElementById('custom-popup').classList.remove('show');
    // The user switched to landscape presumably
  }
}, 3000);

推荐阅读