CSS兼容iPhone全面屏的方式

2020-10-14 09:22 jianzhan

1、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等有底栏的访问器(网页页面显示信息地区早已在安全性区內部)也一样会再加安全性区宽度。

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

css写法,不适用env、constant的访问器会忽视此款式

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

此计划方案能处理计划方案1的难题,且编码更简约

到此这篇有关CSS兼容iPhone全面屏的方式的文章内容就详细介绍到这了,更多有关CSS兼容iPhone全面屏內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!