解决移动端 iphoneX 下吸底按钮被屏幕遮挡

最新推荐文章于 2023-09-11 18:16:46 发布

李思岐

最新推荐文章于 2023-09-11 18:16:46 发布

阅读量811

点赞数

分类专栏：兼容性文章标签： css html html5

本文链接：https://blog.csdn.net/qq_41206257/article/details/120164710

版权

本文主要探讨了在移动端，特别是在iPhoneX及其后续型号中，由于安全区域的影响导致底部元素（如按钮）被屏幕底部的刘海屏区域遮挡的问题。通过深入理解CSS的safe-area-inset-bottom属性，结合适配方案，如使用Flexbox或Grid布局，来实现元素正确吸附到底部而不被遮挡的方法。同时，文章也提到了在HTML5中如何配合meta标签进行适配，确保在不同设备上都有良好的显示效果。

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

<style>
    .div {
     
        position: absolute;
        bottom: 0; // 一般情况下
        padding-bottom: calc(constant(safe-area-inset-bottom) + 20px)<