有没有办法从 Firefox Mobile 上的这个 flutter web 应用程序中删除这个空白区域？

Question

我正在尝试做一个响应式 web 应用程序，在桌面 firefox 上调试它时一切正常，我使用调试工具中的切换设备选项完成了整个布局，但是当我上传到 HTTP 服务器并访问通过我的 phone 我得到了这个屏幕

在 chrome 我没有问题，一切都显示正确，另一方面，在 firefox 上我有那个奇怪的空白 space... 在 chrome space 被“添加到主屏幕”提示占用，也许这有什么关系？任何想法将不胜感激。我留下代码以防它有帮助...

void main() => runApp(MyApp2());

class MyApp2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Container(
          color: Colors.red,
          // child: Text('Hello World'),
        ),
      ),
    );
  }
}

我想说 chrome 我得到了预期的全屏红色行为，除了 AppBar

Answer 1

添加到主屏幕按钮是 PWA 的功能，因此您可能应该深入研究 index.html。你能调试一下你的 Firefox Mobile 并玩一下 css 吗？可以查看官方Firefox Remote Debugging Docs.

有没有办法从 Firefox Mobile 上的这个 flutter web 应用程序中删除这个空白区域？

Is there a way to remove this blankspace from this flutter webapp on Firefox Mobile?

firefox

flutter

flutter-web