iphoneX系列手機底部都有一個（橫杠）鍵，瀏覽器會在頁面滾動時隱藏底部的操作欄，需求：底部導航欄出現

1、判斷是iphonex設備的方法

function isIphoneX(){if(/iphone/gi.test(window.navigator.userAgent)){/* iPhone X、iPhone XS */var x=(window.screen.width === 375 && window.screen.height === 812);/* iPhone XS Max 、iPhone XR */var xMax=(window.screen.width === 414 && window.screen.height === 896);if(x || xMax){return true;}else{return false;}}else{return false} }

2、窗口改變時， 可視區域的值變化

/* 是否為 iPhoneX系列手機 */ if(isIphoneX()){var oldHeight=window.innerHeight; /* 原可視區域 */window.addEventListener("resize",function () {/* safari瀏覽器的操作欄隱藏時可視區域會變大 */if(window.innerHeight>oldHeight){/*.bottomBar 是底部導航欄的選擇器，通過 修改style值 */document.querySelector(".bottomBar").style.paddingBottom="34px";}else {document.querySelector(".bottomBar").style.paddingBottom="0px";}},false); }

總結

以上是生活随笔為你收集整理的iphoneX系列手机在页面滚动时隐藏底部的操作栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。