首页 > 教程
H5页面移动端软键盘弹出时,底部absolute或者fixed定位被顶上去
- 2024-03-02
- 1579 ℃

H5开发中,移动端页面的底部菜单栏,通常会使用fixed或者absolute定位在底部,特别是登录,注册页面底部的信息,在安卓手机上经常会出现软键盘弹出时,底部定位被顶上去,下面提供vue和jQuery两种解决办法。
vue解决方法
<!--html部分-->
<div class="footer" v-show="hideshow"></div>
// js 部分
data(){
return {
docmHeight: document.documentElement.clientHeight, //默认屏幕高度
showHeight: document.documentElement.clientHeight, //实时屏幕高度
hideshow:true, //显示或者隐藏footer
}},mounted() {
// window.onresize监听页面高度的变化
window.onresize = ()=>{
return(()=>{
this.showHeight = document.body.clientHeight;
})()
}},//监听watch:{
showHeight:function() {
if(this.docmHeight > this.showHeight){
this.hideshow=false
}else{
this.hideshow=true
}
}
}js解决方案
var winHeight = $(window).height(); //获取当前页面高度
$(window).resize(function () {
var thisHeight = $(this).height();
if ( winHeight - thisHeight > 140 ) {
//键盘弹出
$('.footer').css('position','static');
} else {
//键盘收起
$('.footer').css({'position':'fixed','bottom':'0'});
}
})上一篇:微信的8个实用功能,隐藏技巧
下一篇:如何使用php与数据库进行交互
相关内容
为什么我国没有ChatGPT那...
通过 SWOT 分析法,看...
网页上传图片需要旋转的问题
推荐7款免费好用的国内外...
易支付对接微信商户完整流程
微信设置电子监护人,杜...
云计算在电子商务和零售...
微信商户号申请
-
如何搜索到自己想要的资源
2025-03-10 1249
-
php提高性能的几个小技巧
2021-04-13 700
-
固态硬盘必做的SSD优化,大幅提升读取速度
2025-06-25 1047
-
splice变相跳出forEach循环
2025-04-07 994
-
你真的会使用百度搜索吗?
2021-11-22 642
-
电脑必装软件有哪些?请一定别错过这五款
2025-04-26 955
-
网页上的视频怎么下载
2021-11-22 588
-
测试了一堆远程控制工具,发现最好用的原来是它
2025-04-27 1126
-
重症急性胰腺炎诊治指南
2024-06-18 1050
-
不备案可以在微信中直接打开的域名后缀
2024-03-04 2756
文章评论 (0)
- 这篇文章还没有收到评论,赶紧来抢沙发吧~


进入有缘空间
点击分享文章