H5页面适配iphoneX底部小黑条遮盖内容

最新推荐文章于 2024-06-30 10:15:00 发布

原创最新推荐文章于 2024-06-30 10:15:00 发布 · 7.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#ios兼容

前端专栏收录该内容

34 篇文章

订阅专栏

博客围绕iOS兼容性展开，但具体内容缺失。推测可能会涉及iOS系统不同版本、不同设备等方面的兼容问题及解决办法等信息技术相关内容。

iphoneX取消了物理按键，改为底部小黑条，这也在页面开发的过程中，会出现底部内容被小黑条遮盖的现象，影响页面效果，
我们可以这也解决
1：增加viewport属性  viewport-fit="cover"
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">

2 利用constant函数 这个函数是ios11新增的css属性用于设定安全区域与边界的距离
    
    safe-area-inset-left   安全区域与左右上下的距离
    
    safe-area-inset-right

    safe-area-inset-top
    
    safe-area-inset-bottom

body{
    padding-bottom:constant(safe-area-inset-bottom);
}
3:对fixed元素的适配
类型一： fixed 元素完全吸低(bottom=0)

通过增加内边距扩展高度
{
    padding-bottom:constant(safe-area-inset-bottom);
}
通过calc覆盖原来高度
{
    height:calc(30(假设值)+constant(safe-area-inset-bottom));
}
还有一种是新增空白元素
{
    position:fixed;
    bottom:0;
    height:constant(safe-area-inset-bottom);
    width:100%;
    background:#fff;
}
类型二：fixed元素不完全吸底
     通过外边距来处理
    {
    margin-bottom:constant(safe-area-inset-bottom);
}
还有一种通过calc覆盖原来bottom值
{
    bottom:calc(20(设定值)+constant(safe-area-inset-bottom));
}