推荐阅读：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 }