css实现适配iphone全面屏代码

　推荐阅读：seo快速排名怎么做？

 

一、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 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

　　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 }