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系列手机在页面滚动时隐藏底部的操作栏相关推荐

html 表格隐藏显示出来了,如何在html页面打开时隐藏表格
Hallo there 我有一些javascript代码,当我的鼠标移过链接时可以看到一个表格,当鼠标移出时隐藏. 我遇到的问题是在页面打开时让表格"隐藏". 我怎么能做到这一点. ...
java怎么往右浮动_[Java教程]jQuery实现页面滚动时智能浮动定位
[Java教程]jQuery实现页面滚动时智能浮动定位 0 2016-08-04 18:00:08 jQuery实现页面滚动时层智能浮动定位_前端开发 * { margin: 0; padding: ...
页面滚动时触发图片逐帧播放_如何在滚动效果上创建逐帧运动图像
页面滚动时触发图片逐帧播放 A step by step guide on how to create that dynamic image background you see everywhere ...
原生js判断iPhoneX系列手机型号
#原生js判断iPhoneX系列手机型号 static isIphone() {return /iphone/gi.test(window.navigator.userAgent)}static is ...
判断是否为iphoneX系列手机（移动端系列）
判断是否为iphoneX系列手机(移动端系列) 直接上代码: function isIphonex() {// X XS, XS Max, XRconst xSeriesConfig = [{devi ...
WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
html侧边导航栏跟随页面滚动,页面滚动时，右侧导航栏跟着对应滚动
页面滚动时,右侧导航栏跟着对应滚动方法一: 导航栏对应跳转 *{ margin:0px; padding:0px; text-align:center; color:#fff; font-size: ...
你也可以做一个小米魅族网站 WOW js WOW js – 在页面滚动时展现动感的元素动画效果
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 可视区域 ...
你也可以做一个小米魅族网站（WOW.js：WOW.js – 在页面滚动时展现动感的元素动画效果）
可视区域动画: aos.js :http://www.jq22.com/jquery-info8150 scrollReveal.js :http://to ...

iphoneX系列手机在页面滚动时隐藏底部的操作栏

iphoneX系列手机在页面滚动时隐藏底部的操作栏相关推荐

最新文章

热门文章