適配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);
       }