隐藏在 Safari 的网址栏后面的网页底部导航（和向上滑动栏 iphone X）答案

【问题标题】：Bottom navigation of webpage hidden behind Safari's url bar (& swipe up bar iphone X)隐藏在 Safari 的网址栏后面的网页底部导航（和向上滑动栏 iphone X）
【发布时间】：2023-01-24 22:38:04
【问题描述】：

我在定位 SPA 以使其适合移动设备（特别是 iphone X）时遇到问题。该网站在地址栏后面延伸，而不是缩小以适应可见部分。

这是用户当前看到的内容：

iphone X website extends below/behind address bar

在整个应用程序上使用强力 80px 底部填充，您可以看到导航栏：

with 80px bottom padding

我在顶层 div 上的 css 规则非常简单：

.App {
 text-align: center;
 color: white;

 height: 100vh;
 width: 100vw;
  
 overflow: hidden;
}

在 index.html 中，我包含了

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />

我也尝试过使用 env(safe-area-inset-bottom) 作为底部填充，但这似乎不起作用。

如何针对这种特定情况调整网页？

【问题讨论】：

标签： css ios iphone single-page-application mobile-safari

【解决方案1】：

好的，经过反复试验，我找到了一个解决方案似乎破坏其他视口/设备：

.App {
  text-align: center;
  color: white;

  position: absolute;

  height: 100%;
  width: 100%;
}

我不确定为什么，但是将 VH / VW 形式切换为 % 并设置绝对定位就可以了。我猜 ios safari 不喜欢使用显式视口单位

【讨论】：