容纳移动布局中的浏览器工具栏

如何解决容纳移动布局中的浏览器工具栏

我正在使用 React 开发一个 (PWA) 应用程序，移动布局的测试主要是使用浏览器开发工具的响应式设计模式完成的，但在真实设备上试用该应用程序后，我注意到浏览器工具栏占用了与实际应用程序有一些空间，并且可能导致某些元素仅在用户向下滚动并隐藏工具栏时才能正确显示。由于这是一个网络应用程序，我希望浏览器上的体验尽可能接近本机体验，但我还没有想出一种方法来处理重叠的浏览器工具栏。

使用的库：

• React.js
• 顺风。
• 反应路由器 DOM。

我的应用程序有一个侧边栏用于导航，该侧边栏使用行和反向列作为 flex 方向转换为底部选项卡。并且导航栏不显示在登录屏幕上。

const App = withRouter(({ location }) => {
  return (
    <div className="flex flex-col-reverse h-screen w-screen md:flex-row">
      {getNavBar(location)}
      <Switch>
        <Route exact path={["/signin","/"]}>
          <Signin />
        </Route>
        <Route exact path="/explore">
          <Explore />
        </Route>
      </Switch>
    </div>
  );
});

由于这是一个 flex 容器，我虽然将 flex-1 用于“内容”将足以填充所需的空间并容纳导航栏（这适用于桌面版本）但似乎布局中未“考虑”浏览器工具栏，因此需要滚动。

<div className="flex flex-col w-full flex-1">
{
    // Some other stuff
}     
</div>

这是前面代码的结果，整个屏幕需要用户向下滚动才能查看整个应用布局。