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)
}

适配iphoneX-LMLPHP

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

05-11 21:47