CSS移动端iPhoneX系列底部兼容

最新推荐文章于 2023-06-01 14:50:03 发布

=^_^=银爪

最新推荐文章于 2023-06-01 14:50:03 发布

阅读量567

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_65635437/article/details/130809383

版权

针对iPhoneX及后续型号手机底部的黑线问题，可以使用CSS的`constant(safe-area-inset-top)`和`env(safe-area-inset-top)`属性来设置内边距，避免内容被遮挡。通过调整顶部、底部、右边和左边的内边距，实现全屏适配并确保内容显示完整。

摘要由CSDN通过智能技术生成

iPhoneX系列手机底部

iPhoneX及之后的手机，底部都会有一个黑线

css属性解决这个兼容问题

为了不让底部的黑线遮挡住底部的内容，用css属性兼容写法解决这个问题

//顶部
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);

//底部
padding-bottom: constant(safe-area-inset-top);
padding-bottom: env(safe-area-inset-top);

//右边
padding-right: constant(safe-area-inset-top);
padding-right: env(safe-area-inset-top);

//左边
padding-left: constant(safe-area-inset-top);
padding-left: env(safe-area-inset-top);