Chrome devtools和实际手机之间的布局差异

Question

我正在构建一个自适应页面，并使用CSS vh单位表示所有高度。我试图将我所有的内容都放在屏幕上，以使其可见而不滚动。我在手机尺寸设置为360x560的Chrome devtools上使它可以工作，但是当我在实际手机上打开它时，下部显示在屏幕外。

当我进一步调查该问题时，我意识到在手机上100vh等于616px，而在Chrome上为560px。我认为616px包括导航部分（URL和Chrome菜单）。这意味着我不能使用devtools进行开发：虽然100vh在devtools中是全屏的，但它总是比实际手机上的全屏大。

这是我使用的代码：

    <div style="background-color: brown; height: 100vh;">
        <div style="background-color: darkolivegreen; height: 90%; font-size: 85vh">
            X
        </div>
    </div>

这是devtools中的图片：

手机上的同一页面：

在第一格中将“ 100vh”更改为“ 100％”时，图像变得相同。另外，如果我在手机上滚动页面，导航栏也会消失，并且页面将达到我期望的100％高。

我如何继续使用vh进行开发，并且在devtools和实际的手机上具有相同的画面？