如何在 flutter web 应用程序的移动浏览器中禁用旋转

Question

我正在开发一个 flutter 应用程序，其中有 web 应用程序，在桌面上它看起来不错，但是当我在移动浏览器上以纵向模式打开它时，它是正确的，当设备旋转时，设计也会旋转并且设计会中断。 即使手机以横向模式拍摄，如何在移动浏览器中禁用 web 站点的旋转？ 我在 main.dart 中给出了这个，但它没有任何区别。

SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]);

Answer 1

我认为您无法通过代码避免这种情况：web 应用程序的方向由浏览器决定，因此您的应用程序可以尽可能多地尝试，但 go 几乎不会成功。 浏览器是这里的主人，它不允许一个页面来决定它的方向。

我认为这里只有一个选择：使用 CSS 并编写两种不同的布局，一种用于横向，一种用于纵向（但我不是 CSS 方面的专家，我帮不了你），这样横向旋转仍然会有一个好看的设计。

Answer 2

您可以尝试使用此 api以实现该行为。 但是，无法保证客户端浏览器将支持 API，因此大多数应用程序都实现了一种后备，即检测当前方向，然后在需要时要求用户旋转设备。