在 iPhoneX 这种怪异的屏幕上,由于存在顶部的刘海和底部的横条,所以,使用普通的布局方式,页面的顶部和底部可能会被盖住。对于这种问题,还好苹果给出了解决方案,提出了安全区的概念。
首先需要在meta
标签中添加viewport-fit=cover
这个选项,如下。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
然后就可以设置安全区的内padding
边距,以保证内容能显示在安全区中。需要注意的是,必须添加viewport-fit=cover
属性,安全区才会生效。
body {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
}
在 IOS11 中,新增了上面几个safe-area-inset-top
这样的属性,在 iOS11.2 之前,可以使用constant()
,但是 IOS11.2 之后,这个属性就不支持了,所以需要使用env()
来兼容。
然后使用媒体查询判断手机型号,来让 iPhoneX、iPhoneXS 等这样的手机使用上面的布局,而其他的不受影响。
/* XS / XS Max / XR 适配 */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3),
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
/*头部适配*/
.header-bar {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
/*底部适配*/
.footer-bar {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
手机尺寸如下所示(图片来源于网络)
这样,就适配了 iPhoneX 等这样怪异的手机屏幕,本文完。
如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!
如无特殊声明,文章均为原创,若有不正之处,万望告知。转载请附上原文地址,十分感谢!