失败方案举例:
css3 监听代码(失败):
<!-- <style type="text/css">
@media (max-height: 400px) {
.copyRightCls {
display: none;
}
}
</style>-->
document添加监听方法(失败):
var h = window.innerHeight;
var myInput = document.getElementsByTagName('input')[0];
myInput.addEventListener('focus',handler,false);
function handler(){
$('body').height(h);
}
通过 window.innerHeight 获取液面高度,判断页面高度改变,设定新的页面高度给当前页面
前提是弹出软键盘导致页面发生变化
document获取高度来判断是否弹出键盘(失败):
heiht: 返回元素的高度或者说这个div的内容的高度,它是jquery对像,如果只是想取到某个内容的高度,那完全可以使用这个
offsetHeight:内容高+padding+边框
clientHeight::内容的可视高度(不包括边框,边距或滚动条)
scrollHeight: 整个元素的高度(包括带滚动条的隐蔽的地方)
var screenHeight = document.body.offsetHeight;
// 为window绑定resize事件
window.onresize = function() {
var nowHeight = document.body.offsetHeight;
if(nowHeight < screenHeight) {
// 将底部弹起的按钮隐藏(可使用给按钮添加相应消失类)
$(".weui-footer_fixed-bottom").css("position","static");
} else {
// 将按钮正常显示(可使用给按钮移除相应消失类)
$(".weui-footer_fixed-bottom").css("position","fixed");
}
}
成功方法:
通过resize方法监听,$(this).height(),获取页面高度,成功获得改变后的页面高度
var winHeight = $(window).height(); //获取当前页面高度
$(window).resize(function(){
var thisHeight=$(this).height();
if(winHeight - thisHeight >50){
//当软键盘弹出,在这里面操作
$(".copyRightCls").hide();
}else{
//当软键盘收起,在此处操作
$(".copyRightCls").show();
}
});
this是html对象 $(this)是jq对象,调用jq对象的height()方法。
记录解决问题的过程,这个问题困扰了我一天,终于解决,希望能帮主到有需要的兄弟姐妹