尽管手机上启用了自动旋转，渐进式网络应用程序仍停留在纵向模式

Question

我正在开发一个网站，我还使用 https://pwabuilder.com

创建了一个渐进式 Web 应用程序 (PWA) Android 应用程序

在我的

manifest.json

文件中，我最初将

orientation

属性设置为

any

，但有了这个，我手机上安装的 PWA 将自动旋转，尽管我的手机上禁用了“自动旋转”。不好。

manifest.json 属性值说明

因此，我尝试将

orientation

中的

manifest.json

属性设置为

natural

，并且我还尝试完全删除该属性，但在这两种情况下，现在 all 旋转均被禁用。也就是说，无论我是否在手机上启用或禁用“自动旋转”，安装的应用程序都会停留在纵向模式。

当然，这在网站的网站版本上都不是问题。如果我只是导航到 Chrome 中的页面，它就可以正常工作。也就是说，如果我在手机上禁用“自动旋转”，则该网站不会旋转，但如果我启用它，那么当我物理旋转手机时，该网站就会旋转。我只是想让我的 PWA 模仿这种行为，但我不太确定如何做。

我应该将

orientation

中的

manifest.json

属性设置为什么值才能模仿网站的默认行为？

Answer 1

您的问题是一种已知的行为。渐进式 Web 应用程序 (PWA) 和本机应用程序并不总是遵循操作系统级别的自动旋转设置。具体来说，当您在 PWA 的

orientation

中定义

manifest.json

属性时，您正在为应用程序设置首选显示模式，并且它往往会覆盖系统设置。

1. 使用 JavaScript：您可以使用屏幕方向 API 以编程方式检测和应用方向更改。通过这样做，您有可能绕过

   manifest.json

   方向设置所施加的限制。

这是一个例子：

if (window.screen.orientation) {
  window.screen.orientation.addEventListener('change', function() {
    let orientation = window.screen.orientation.type.split('-')[0];
    if (orientation === 'landscape') {
      // Set view to landscape or perform any other adjustments
    } else if (orientation === 'portrait') {
      // Set view to portrait or perform other adjustments
    }
  });

  // You can also use the lock method if needed
  // window.screen.orientation.lock('portrait');
}

2. 本机包装器：如果您想通过 PWA 提供更像应用程序的体验并确保尊重系统设置，请考虑将 PWA 包装在本机 shell 中（例如使用 Apache Cordova 或 Capacitor 等工具）。通过这种方式，您可以在本机级别通过更精细的控制来微调体验并管理方向。然而，这确实会给您的项目带来额外的复杂性。

目前，我建议结合不设置

orientation

属性并尝试使用屏幕方向 API 来尝试获得您想要的行为。这不是一个理想的解决方案，但它可能是您无需深入了解本地领域即可获得的最接近的解决方案。