iOS 底部导航栏多余间距解决办法

场景： H5 页面底部导航栏

.footer-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding-bottom: env(safe-area-inset-bottom);
}
复制代码

现象： 发现在 iPhone 12 上底部导航栏高度明显大于 60px。

原因： 从 iPhone X 开始的 iOS 机型底部有横条，H5 页面仍然可以在横条区域显示，说明横条区域在页面视窗范围内，但 position: fixed; 的 bottom: 0; 是在横条区域以上的，不会盖住横条区域，这就导致 position: fixed; 的 bottom: 0; 并不是真正的在页面最底部，而是高于页面底部一定距离，大约 35px，即横条区域的高度。

解决方法：

<meta name="viewport" content="... viewport-fit=cover">
复制代码

为了告诉浏览器使用屏幕上所有的可用空间，并以此使用env()变量，我们需要添加一个新的视口元值。

.footer-navbar {
  ...
  padding-bottom: env(safe-area-inset-bottom);
}
复制代码

safe-area-inset-* 由四个定义了视口边缘内矩形的 top, right, bottom 和 left 的环境变量组成，这样可以安全地放入内容，而不会有被非矩形的显示切断的风险。对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。 对于非矩形显示器（如圆形表盘，iPhoneX屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。

参考：

How to Fix Bottom Padding for iOS Mobile Browsers

env()