评论

公众号底部导航条兼容处理

理想状态下: 当没有出现底部导航条时, 吸底按钮保持安全区域留白 当出现底部导航条时, 吸底按钮取消底部留白

先来看段处理后的gif, 视频转换有点糊

底部黑色的导航条是微信浏览器的功能, 业务中通常也对iphoneX以上的机型做了兼容处理,也就是吸底按钮保持底部安全区域留白

理想状态下:

  1. 当没有出现底部导航条时, 吸底按钮保持安全区域留白
  2. 当出现底部导航条时, 吸底按钮取消底部留白

先来看下底部导航条出现的机制

1. 页面栈中无历史 - 不显示导航条

2, 页面栈中有历史 - 显示导航条

3. 页面小于一定高度,导航条常驻

4. 页面超过一定高度,滚动会显示或隐藏导航条

一定高度的范围:

iphonex / iphone 11 pro 页面高度超过187.6%  4569.936px

  iphone xs max 页面高度超过187.6%184%  4945.92px

ummm, 其实要解决这个问题完全不用关心导航条出现的机制, 只需要借助 constant(safe-area-inset-bottom)

关于constant(safe-area-inset-bottom), 可以参考https://blog.csdn.net/qq_42354773/article/details/81018615

具体解决方案:

  1. 设置viewport <meta name="viewport" content="width=device-width, viewport-fit=cover"> (红色部分是关键)
  2. 设置样式

/* 这里用了css变量, 不用css变量也是可以的 */
html {
    /* less 写法 */
  --safe-bottom calc( ~"constant(safe-area-inset-bottom)" );
  --safe-bottom calc( ~"env(safe-area-inset-bottom)" );
    /* 正常css写法 */
    --safe-bottom constant(safe-area-inset-bottom);
  --safe-bottom env(safe-area-inset-bottom);
}
.fixIphonex {
  margin-bottomvar(--safe-bottom) !important;
}
.fixIphonex::after {
  content'';
  position: fixed;
  bottom0!important;
  left:0;
  heightcalc(~"var(--safe-bottom) + 1px");
  width100%;
  background#ffffff;
} 

最后给吸底按钮添加.fixIphonex类名, 完工, 就是图片上的效果啦

so easy!

最后说下,这种处理方式, 在IOS其他浏览器也有非常好的表现,不信,可以试试~~


最后一次编辑于  07-23  
点赞 1
收藏
评论
登录 后发表内容