给X系列手机设置安全区域

1. 添加meta标签【viewport-fit的值为cover】

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

<div id="nav">
    视图区域
</div>

body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#nav {
  width: 100vw;
  background-color: pink;
  overflow: auto;
  height: calc(100vh - env(safe-area-inset-bottom));
}