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