木灵鱼儿

木灵鱼儿

阅读：1440

最后更新：2021/04/29/ 15:07:03

移动端适配iPhoneX和安卓底部小黑条

这个问题还是同事发现的，毕竟我这种穷人根本用不起苹果，更何况也用不来，毕竟，我爱安卓。

废话不多说，主要问题就是 iPhoneX底部小黑条问题，他的宽度也会被网页占据，导致小黑条显示在网页上头，第一是触发上会出现问题，第二是难看。

解决办法就是通过css处理。

解决方案

首先对meta标签添加一条属性。

<meta name="viewport" content="width=device-width, viewport-fit=cover">

如果你已经有了viewport声明，那么就在后面content里加上viewport-fit=cover即可。

viewport-fit：IOS11新增的特性，是为了iPhoneX而对meta标签做出的一个拓展属性。目前有三个值：
contain 可视窗口完全包含网页内容

cover：网页内容完全覆盖可视窗口

auto：默认值，跟 contain 表现一致

关键就是我们要设置为cover。

然后我们需要设置安全距离，其实就是拿到底部按钮的高度。

body {
    padding-bottom: constant(safe-area-inset-bottom); 
    padding-bottom: env(safe-area-inset-bottom);
}

注意这两条css的顺序，constant是最新的标准，应用于IOS11.2之后的版本，之前则是使用env，按照css的兼容性写法，最新的写前面，优先使用，兼容的写后面。

这样我们的body就会在x设备上，底部padding多出一部分值，如果是其他设备，则无效果。

这样我们就可以方便操作了，比如：

.safe {
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
    background-color: #fff;
    overflow: hidden;
  }

设置一个class，他的高度为底部按钮的高度，然后放在html底部，这样，内容在x设备上就会撑出底部小黑条按钮高度，不影响网页使用。

当然也可以用于fixed布局bottom的值，具体就看自己怎么用了。

群友分享的刘海屏+小黑条方案

body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px            
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0                
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0                
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px       
}
文章分类 CSS
文章标签 css移动端iPhoneX底部小黑条安全距离刘海
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 1440

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1440

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译