Flutter Web在iPhone 13（iOS 16.4）浏览器中显示不全且存在空白区域

问题描述 #

基于**Flutter SDK 3.7.10（稳定版）**开发的Web应用，在iPhone 13（iOS版本16.4）的移动浏览器中无法全屏显示，页面存在空白区域。

已尝试操作：

• 更新至Flutter稳定分支
• 清理项目缓存及重新构建项目

可行解决方案 #

1. 调整Web入口的meta标签与样式 #

在web/index.html中，修改viewport标签添加viewport-fit=cover属性，确保适配iOS全屏：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

同时在页面样式中加入全屏适配规则：

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
}
#flutter_app {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

2. 优化Flutter布局逻辑 #

确保根布局使用MediaQuery获取准确屏幕尺寸，若为底部空白可调整Scaffold的适配属性：

Scaffold(
  resizeToAvoidBottomInset: false,
  body: SizedBox(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    child: // 你的业务组件
  ),
)

3. 升级Flutter版本 #

Flutter 3.7.10存在部分Web端iOS适配缺陷，建议升级至最新稳定版，执行命令：

flutter upgrade

升级后重新构建Web项目：

flutter build web --release

4. 添加WebKit专属适配样式 #

针对iOS Safari的渲染特性，在web/index.html的样式中补充：

@supports (-webkit-touch-callout: none) {
  body {
    height: -webkit-fill-available;
  }
}

内容的提问来源于stack exchange，提问作者Mahdi Gharooni