在Chrome PWA中更改屏幕方向

Question

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

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

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

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

- Udo G

---

在PWA中全屏视频也遇到了类似的问题。你找到解决方案了吗？ - t1gor

抱歉，不行。 - Udo G

Answer 1

我们最终采取的做法是完全从manifest.json中删除"orientation"属性。这将允许以旋转的方式全屏播放视频。我猜，如果您真的只想在应用程序的其余部分中保留"竖屏"方向，则可以使用screen.orientation API通过JS锁定它：https://caniuse.com/#feat=screen-orientation（支持81.82%）。原始答案：最初的回答。

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

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

请注意，这仍然是一份草案，而不是实时规范。请查看Mozilla的文档和信息。希望这有所帮助。"最初的回答"

- t1gor