最近写了一个网页，页面很多元素使用的是Fixed定位，当在手机端的Safari浏览器、安卓浏览器等测试时，会出现顶部元素、底部元素 被地址栏、菜单栏或工具栏遮挡的情况。于是，我查阅了相关资料，发现了一些解决方案，在iOS设备上使用Safari浏览器时，开发者经常会遇到内容被地址栏、菜单栏或工具栏遮挡的问题。本文将探讨如何使用 viewport-fit 属性和CSS的 env() 函数来解决这些问题。

<meta name="viewport" content="viewport-fit=cover" />

由于vh代表的是视口大小的高度，而在ios的Safari浏览器中，地址栏和菜单栏/工具栏也是属于视口的一部分，所以会导致有测试的时候ios14及以上的手机打开页面时，页面会出现少了一部分的情况，这种情况往往是设计之初就没有考虑到兼容问题导致的，在项目即将完成的时候，你可以通过以下代码来解决

/* 方案1：这种方案虽然有效，但是由于不同页面的类名不同，需要构建多套代码 */
padding-top: env(safe-area-inset-top, 0px);
/* 方案2：将你的高设置为内容的100%减去安全区域的距离即可，这种对我写的这个项目代码量最少，效果还不错的方案了 */
height: calc(100% - env(safe-area-inset-top, 0px));

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  /* 等价于 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body {
  padding: 0;
}

/* 在竖屏模式下，我们设置 `padding-top` 和 `padding-bottom` 为 `env(safe-area-inset-top)` 和 `env(safe-area-inset-bottom)` 的值，以达到内容不被地址栏、菜单栏或工具栏遮挡的效果。 */
@media (orientation: portrait) {
  body {
    /* 当屏幕方向为竖屏时应用的样式 */
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
  }
}

/* 在横屏模式下，我们设置 `padding-left` 和 `padding-right` 为 `env(safe-area-inset-left)` 和 `env(safe-area-inset-right)` 的值，以达到内容不被地址栏、菜单栏或工具栏遮挡的效果。 */
@media (orientation: landscape) {
  /* 当屏幕方向为横屏时应用的样式 */
  body {
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
}