css怎样实现适配苹果全面屏

css实现适配苹果全面屏的办法是：1、通过mediaquery方式来实现；2、可以通过CSS函数来实现，概括办法是：在meta标签中参加viewport-fitcover。

一、media query方式

/*iPhone X 适配*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*iPhone XS max 适配*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*iPhone XR max 适配*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
 .fixed-bottom{
 bottom: 37px;
 }
}

存在的题目：在微信webveiw内部此方案能在元素底部加上平安区域宽度，没有题目。但是在safari等有底栏的阅读器（页面显示区域已经在平安区内部）也一样会加上平安区宽度。

（视频教程：css视频教程）

二、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

css写法，不支撑env、constant的阅读器会忽略此样式

.fixed-bottom{
 bottom: 0;
 bottom: constant(safe-area-inset-bottom);
 bottom: env(safe-area-inset-bottom);
}

举荐教程：CSS入门根基教程

以上就是css怎样实现适配苹果全面屏的细致内容，更多请关注 百分百源码网 其它相干文章！