iOS 安全区域

1
2
3

为什么页面在 iPhoneX 上，上下都有一部分空白(如果是横屏，左右下都有一部分空白)？

有一个 fixed top:0 的 titleBar，为什么页面滚动时，页面内容会出现在 titleBar 的上面？

是 iPhoneX 的”安全区域”问题
解决方法:

1 2	在 meta viewport 上加 viewport-fit=cover 如: <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

这样页面就可以覆盖到整个屏幕，当然也会带来一些小问题，如 titleBar 中间的内容无法显示，被前摄像头占用了
可以用媒体查询处理:

// iPhoneX 的适配 
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  // 底部给麦克留出空白
  .page{padding-bottom: 1.7rem;}

  // 头部从摄像头留出空白
  .titleBar {padding-top: 1rem;}
  .titleBar:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1rem;
    background-color: #000000;
  }
}

注:
上下都留出空白了，不就和之前一样了吗？为什么还要多此一举？
不太一样
加 viewport-fit=cover 可以在上下空白区显示自定义的内容，可以是背景色，也可以任意别的东西