如何解决Flutter Web应用在移动端Firefox下的多余空白显示问题？

这个异常和你写的Flutter业务代码本身半毛钱关系没有——你现在测试的代码里body就是个纯红背景的Container，没写任何自定义高度、占位逻辑，出现的底部空白是移动端Firefox（Gecko内核）和Flutter Web的视口适配兼容偏差导致的。你之前注意到的Chrome上同位置的“添加到主屏幕”提示，只是Chrome自己的原生UI刚好把这块适配差异盖住了，根本不是你代码留的占位。

具体排查&解决步骤 #

• 优先检查项目/web/index.html的视口配置
  Flutter Web默认编译出来的页面不会自动补全移动端全适配的视口规则，Firefox移动版碰到缺视口配置的页面，会默认按980px的桌面视口渲染，后续计算页面高度的时候会错误叠加系统UI的预留高度，直接在底部撑一块没有背景的空白。去页面head标签里确认视口meta标签是不是带了下面这些属性，缺的话手动补上：
  name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"

• 强制覆盖Firefox下的安全区域计算bug
  目前Flutter Web的默认安全区域适配逻辑，只给Chromium内核浏览器做了兼容，对Gecko内核的env(safe-area-inset-bottom)计算是有问题的：会把根本不存在的底部安全区域值算成实际要预留的高度，直接撑出来空白。可以在web目录的全局自定义CSS里加强制覆盖规则：

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* 强制清掉Firefox多算的底部安全区预留 */
    padding-bottom: 0 !important;
  }
  /* 覆盖Flutter自动生成的、给Chrome添加主屏幕提示留的占位样式 */
  flt-glass-pane {
    margin-bottom: 0 !important;
  }
  

• 快速排除自身布局问题
  你现在测试代码里的Container没指定强制铺满父容器的尺寸，改成下面的写法再测一次，确认不是自身布局的问题：

  body: Container(
    width: double.infinity,
    height: double.infinity,
    color: Colors.red,
  )
  

  重新部署后如果Firefox下的空白还在，就完全坐实是上面说的浏览器兼容问题，跟业务代码没关系。

内容的提问来源于stack exchange，提问作者Pen Drive