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

Question

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

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

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

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

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

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

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

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

谢谢

Answer 1

您可以做的最好的选择是生成一个不允许输入的简单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);