• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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

166 0

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

废话不多说,主要问题就是 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       
}
0
  • 本文分类:CSS
  • 本文标签:css移动端iPhoneX底部小黑条安全距离刘海
  • 流行热度:已超过 166 人围观了本文
  • 最后更新:2021年04月29日 - 15时07分03秒
  • 发布日期:2021年04月23日 - 11时07分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码