一、media query方式
1 /*iPhone X 适配*/
2
3 @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
4
5 .fixed-bottom{6
7 bottom:37px;
8
9 }
10
11 }12
13 /*iPhone XS max 适配*/
14
15 @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3){
16
17 .fixed-bottom{18
19 bottom:37px;
20
21 }
22
23 }24
25 /*iPhone XR max 适配*/
26
27 @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2){
28
29 .fixed-bottom{30
31 bottom:37px;
32
33 }
34
35 }
面临的挑战：在微信webveiw里边此方法能在元素底端添加安全区域尺寸，没有问题。但是在safari等有底栏的浏览器(网页显示区域已经在安全区里边)也一样会添加安全区尺寸。
二、CSS函数
iPhone在发布全面屏手机之后给出的CSS函数，ios<11.2为constant()，ios>11.2为env()。可填写safe-area-inset-top、safe-area-inset-left、safe-area-inset-right、safe-area-inset-bottom对应上下左右的安全区域尺寸。env和constant只有在viewport-fit=cover过程中才可以奏效。
代码如下所示：
meta标签添加viewport-fit=cover
1
css写法，不兼容env、constant的浏览器会无视此css
1 .fixed-bottom{
2
3 bottom:0;
4
5 bottom:constant(safe-area-inset-bottom);
6
7 bottom:env(safe-area-inset-bottom);
8
9 }
原文：/x1aoguaishou/p/13037959.html
