html手机全面屏的适配,css实现适配iphone全面屏代码

一、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 }

原文：https://www.cnblogs.com/x1aoguaishou/p/13037959.html