1. 基础设备信息
-
首先在了解iPhoneX适配之前，需要了解关于iPhone设备的一些基础
1） 关于iPhone的一些基础参数
设备信息.png
2） iPhoneX设备信息
- iPhoneX屏幕组成：上部齐刘海sensor housing（44pt） + 安全区域safe area + 底部手势区域Home Indicator（34pt）
-
safe area（安全区域）
safeArea.png - 安全区域以外的是上部“齐刘海” 和 下部“手势区域”，一般情况下，我们都会在安全区域（safe area）中进行页面的编写；
2. iPhoneX适配
1）适配方案viewport-fit、css constant()、媒体查询
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
- viewport-fit有两个值，
contain和cover
默认是contain，页面内容显示在safe area中（不包括上部的齐刘海和下部的手势区域）
cover值：页面内容充满屏幕 - css constant()
有四个值：safe-area-inset-top,safe-area-inset-left,safe-area-inset-right,safe-area-inset-bottom
1)当viewport-fit:contain，上面这个四个值无效
2)当viewport-fit:cover，这四个值需要设置，页面才会显示在安全区域中，设置如下：
body {
padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
}
- 媒体查询
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
// iphoneX css部分
}
3. 总结
- 一般情况下iPhoneX适配方法有三种
- viewport-fit:contain
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=contain">
- viewpoer-fit: cover + css canstant()
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
body {
padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
}
- css的媒体查询
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
// iphoneX css部分
}
