超简单的iphonex，iphone11 适配媒体查询

前端开发的时候， 如果按钮吸底定位，iphonex 和11 会出现按钮靠下

解决方案：媒体查询（推荐）

/* iphoneX 适配 */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .mdipx {
    padding-bottom: 34px !important;
  }
  #app {
    box-sizing: border-box;
    padding-bottom: 34px !important;
  }
}
/* iphone11 适配 */
@media only screen and (device-width: 414px) and (device-height: 896px){
  .mdipx {
    padding-bottom: 34px !important;
  }
  #app {
    box-sizing: border-box;
    padding-bottom: 34px !important;
  }
}

然后把类名 mdipx 写在你定位的btn容器上

另一种方法 另外： 在iOS 11中的WebKit包含了一个新的CSS函数constant()以及一组四个预定义的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom。当合并一起使用时，允许样式引用每个方面的安全区域的大小。【要设置viewport-fit:cover时才生效】 此方法只能在ios11+ 系统才有效，貌似弹窗还需要处理。 所以不推荐 没有具体试过， 感兴趣的大家可以去试试

/* iPhone X 和 iPhone XS */

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  
}

/* iPhone XR */

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  
}

/* iPhone XS Max */

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  
}