Flutter Web应用如何在移动端设备上锁定屏幕方向为竖屏

Web端没有原生App的系统级全局方向锁定权限，可通过以下两种方案组合实现强制竖屏展示效果：

方案1：CSS强制适配（全场景兼容） #

兼容性最好的兜底方案，不需要依赖浏览器API权限，横屏状态下自动旋转内容/弹出提示：

1. 打开项目下web/index.html文件，在<head>标签内插入如下样式：

<style>
/* 横屏状态下自动旋转内容为竖屏显示 */
@media screen and (orientation:landscape) {
  body {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
  /* 不需要提示的话可以删掉以下横屏提示相关代码 */
  .landscape-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    color: #fff;
    font-size: 18px;
    z-index: 99999;
  }
}
/* 竖屏状态下隐藏提示 */
@media screen and (orientation:portrait) {
  .landscape-tip {
    display: none;
  }
}
</style>

2. 如果需要加横屏提示，在<body>标签最开头插入提示元素：

<div class="landscape-tip">请旋转设备至竖屏以获得最佳体验</div>

方案2：JS原生API锁定（适配PWA/高版本浏览器） #

针对PWA安装场景、或者支持Screen Orientation API的浏览器（Chrome 38+、Safari 16.4+），可调用原生API实现系统级方向锁定：
在Flutter项目入口main.dart中添加初始化逻辑：

import 'dart:js' as js;
import 'package:flutter/foundation.dart';

void main() {
  // Web端执行方向锁定逻辑
  if (kIsWeb) {
    try {
      js.context.callMethod('eval', ['''
        if (screen.orientation?.lock) {
          // 锁定为正向竖屏
          screen.orientation.lock('portrait-primary').catch(err => {});
        }
      ''']);
    } catch (_) {
      // 不支持API的浏览器直接忽略
    }
  }
  runApp(const MyApp());
}

注意：普通浏览器场景下该API需要用户主动交互（如点击按钮）后才能触发，PWA全屏/安装到桌面场景下可直接触发，建议和方案1搭配使用做兼容性兜底。

内容的提问来源于stack exchange，提问作者Whao Liang