木灵鱼儿

木灵鱼儿

阅读：1104

最后更新：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底部小黑条安全距离刘海
木灵鱼儿

木灵鱼儿

发布了 615 篇文章获得点赞 0获得阅读 1104

版权申明

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

one
two
three

关于作者

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

相关文章

vue-i18n 的使用方式vue-i18n 的使用方式
设计模式的7个设计原则设计模式的7个设计原则
第六章 设计模式第六章 设计模式
第五章 代码复用模式第五章 代码复用模式
第四章 对象的创建第四章 对象的创建