在 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 等这样怪异的手机屏幕，本文完。
如果觉得我的文章对您有用，请您随意打赏。您的支持将鼓励我更加努力创作！
如无特殊声明，文章均为原创，若有不正之处，万望告知。转载请附上原文地址，十分感谢！
说点什么