ios移动端兼容：iPhone X等机型底部的安全距离样式的设置

上网的虫不叫网虫

于 2021-10-21 12:01:56 发布

阅读量6.7k

点赞数

分类专栏： CSS 技术总结文章标签： ios iphone 安全

本文链接：https://blog.csdn.net/qq_42961150/article/details/120883896

版权

技术总结同时被 2 个专栏收录

16 篇文章

订阅专栏

CSS

9 篇文章

订阅专栏

博客介绍了如何通过两行CSS代码实现对iPhoneX及其类似机型底部安全区域的完美兼容，主要涉及Web页面在iOS设备上的布局调整，确保内容不被刘海屏和底部操作条遮挡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无论是H5、小程序的页面中，兼容iPhone X等机型的时候，需要考虑到页面底部的安全距离的设置，如图所示（设置之前）：

只需要两行css代码就可以完美兼容：

/* iphonex 等安全区设置，底部安全区适配 */
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

设置后的效果：