Web 视图和移动设备看起来不同

Question

为了开发，我使用的是 chrome 引擎。在网络版上一切都很好，但是在 chrome 的真实设备上就不一样了。 Firefox 等其他浏览器也会发生这种情况。

左侧是我的桌面视图，右侧是我的设备视图。

body {
  margin: 0;
  display: flex;
  height: 100vh;
  overflow: hidden;
}

main {
  overflow: auto;
  height: calc(100% - 112px);
  background: red;
}

.navigation {
  height: 56px;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 6;
}

有人知道为什么会这样吗？

提前致谢！

Answer 1

这可能是因为 px 值。而是尝试使用 % 或 rem.

Answer 2

问题来自vh。
在移动版本上是 vh 不同。我通过使用 JavaScript 计算 vh 来修复它。这里有更多信息：

Web view and mobile look different