iphoneX系列手机在页面滚动时隐藏底部的操作栏
生活随笔
收集整理的這篇文章主要介紹了
iphoneX系列手机在页面滚动时隐藏底部的操作栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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系列手机在页面滚动时隐藏底部的操作栏的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 通俗易懂的LHS和RHS
- 下一篇: STATA学习笔记:数据合并