iphoneX系列手机解决底部按钮兼容问题/底部小黑条在微信小程序和H5的屏幕适配

1、解决方案一

先判断是否是苹果然后判断监听可视区域值得变化，变大说明此时为home键存在情况，变小则说明出现了底部导航条，根据这个变化改变底部按钮得padding-bottom值

具体参考：https://blog.csdn.net/yao_1063066968/article/details/108849957?utm_medium=distribute.pc_relevant_bbs_down.none-task--2~all~first_rank_v2~rank_v29-6.nonecase&depth_1-utm_source=distribute.pc_relevant_bbs_down.none-task--2~all~first_rank_v2~rank_v29-6.nonecase

2、安全距离样式解决办法

首先了解安全距离的定义:

https://blog.csdn.net/sd19871122/article/details/80989704

通过属性viewport-fit=cover 及其样式

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       
}

　　当然还有一些小程序里面也会有这种问题，可以参考这篇文章：

https://blog.csdn.net/weixin_39466493/article/details/105215789?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.3001.4242