适配iphone X

首先须要为meta标签加上viewport-fit=cover，默认viewport-fit=contain，跟background-size相似。
当值设置为cover既可以让安全区域铺满全屏，就跟适配其余设备没什么区别了。
可是内容会被顶部和底部的硬件遮挡，若是不想被遮挡，就须要头部底部预留必定高度。
因此就需为body加上padding，官方提供了四个值，能够直接获取到头部底部以及横屏时候的左侧右侧值，咱们只须要在本身的容器设置上着四个值便可：
constant-top: (safe-area-inset-top)
padding-left: constant(safe-area-inset-left)
padding-right: constant(safe-area-inset-right)
padding-bottom: constant(safe-area-inset-bottom)

• 须要注意的是，viewport-fit值不为cover设置constant()是无效的
• 竖屏时候左侧右侧值为0，横屏时候左侧右侧才有值

code

meta

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">

css

.container {
  overflow: scroll;
  box-sizing: border-box;
  padding-top: constant(safe-area-inset-top);
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
}