在 Chrome PWA 中更改屏幕方向

Question

"orientation": "portrait"我构建了一个渐进式 Web 应用程序 (PWA)，并在其清单文件中指定。

这可以确保无论手机如何握持（至少对于 Chrome），应用程序都以纵向模式显示。

这对于我的应用程序的几乎所有情况都适用，但在某些情况下会显示嵌入的 YouTube 视频（iframe 嵌入 API）。将视频置于全屏模式时，视频会以纵向模式显示，这是没有用的。

我可以通过 JavaScript 更改所需的屏幕方向吗？或者至少“解锁”方向，以便暂时禁用清单设置？

Answer 1

我们最终做的是从manifest.json 中完全删除“orientation”属性。这将允许全屏视频旋转。我想如果你真的想在应用程序的其余部分只保留“纵向”方向，你可以使用 API 通过 JS 锁定它screen.orientation： https: //caniuse.com/#feat=screen-orientation（支持 81.82%）：

// to lock portrait
ScreenOrientation.lock("portrait");

// and then allow any
ScreenOrientation.unlock();

请注意，这仍然是一个工作草案，而不是实时规范。来自 Mozilla 的更多文档和信息。希望有帮助。