小程序|H5|WeChat利用safe-area-inset-*兼容iPhoneX安全距离

bot_##

已于 2023-01-06 16:18:47 修改

阅读量698

点赞数 1

CC 4.0 BY-SA版权

分类专栏：优化方案文章标签：小程序前端 javascript

于 2023-01-06 14:14:23 首次发布

本文链接：https://blog.csdn.net/weixin_42232156/article/details/128577894

优化方案专栏收录该内容

38 篇文章 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在小程序和H5中利用safe-area-inset-*属性来兼容iPhoneX的安全距离，包括iOS 11及之后的写法，并提供了一个SASS mixin的示例。同时强调了在Android和iOS设备上需要注意的细节，如CSS层级、calc函数的使用以及不支持rpx单位等问题。

分别创建屏幕上边框，右边框，下边框，左边框安全距离：
safe-area-inset-top，
safe-area-inset-right，
safe-area-inset-bottom，
safe-area-inset-left

使用：
iOS 11
padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);

iOS 11.2 beta及其后
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);

兼容性写法：
padding-top: 10px;
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);

了解本专栏