iphonex适配

html{
  height: 100%;
   100%;
  overflow: hidden;
  /*和header背景颜色一样,使工具条和header背景颜色一样*/
  background-color: #fff !important;
}

/*top 这里直接置顶,是因为项目需求。若要为工具条的高度,比较麻烦,所以建议原生做适配*/
body {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
@media only screen and (device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  body {
    top: constant(safe-area-inset-top);
    /*bottom: constant(safe-area-inset-bottom);*/
    left: constant(safe-area-inset-left);
    right: constant(safe-area-inset-right);
  }
}

  

原文地址:https://www.cnblogs.com/tw6668/p/11046509.html