适配iphoneX

tips

iphone6设备宽高为375×667，屏幕分辨率为750×1334，故其设备像素比（dpr）为2。iphoneX的设备宽高375*812，屏幕分辨率为1125x2436，故dpr=3

适配iphoneX

目前了解的有3中方法，前两种方法是先判断机型

1. 判断iphoneX机型-1

通过判断navigator.userAgent中的字符串iphone和iphoneX的设备宽和高

const isIphoneX = () => {
    return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}

2.判断iphoneX机型-2

通过媒体查询，判断设备宽高和dpr

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

3.通过css3的content
在iOS 11中的WebKit包含了一个新的CSS函数constant()，以及一组四个预定义的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom

body {
           background: grey;
           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);
       }