先来看段处理后的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-bottom: var(--safe-bottom) !important;
}
.fixIphonex::after {
  content: '';
  position: fixed;
  bottom: 0!important;
  left:0;
  height: calc(~"var(--safe-bottom) + 1px");
  width: 100%;
  background: #ffffff;
} 

 

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

so easy!

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