我使用 Phonegap 和 jQuery Mobile 设计了一个应用程序。固定页脚可以正常工作,直到我单击下拉列表或文本字段,这会导致页脚从视图中消失 (Android 4.0) 或移动到视图中间 (Android 2.2 Galaxy Tab)。有什么建议么?
Phonegap 版本:Cordova 2.1.0
jQuery 移动版本:1.2.0
这是我的代码:
<div data-role="footer" class="nav-mobilyzer" data-tap-toggle="false" data-position="fixed">
<div data-role="navbar" class="nav-mobilyzer" data-grid="d">
<h1>footer</h1>
</div>
</div>
我在某些设备上遇到了页脚显示的问题,而在其他设备上则没有。我发现这对我有用:
var initialScreenSize = window.innerHeight;
window.addEventListener("resize", function() {
if(window.innerHeight < initialScreenSize){
$("[data-role=footer]").hide();
}
else{
$("[data-role=footer]").show();
}
});
EDIT:
但是方向改变呢?
var portraitScreenHeight;
var landscapeScreenHeight;
if(window.orientation === 0 || window.orientation === 180){
portraitScreenHeight = $(window).height();
landscapeScreenHeight = $(window).width();
}
else{
portraitScreenHeight = $(window).width();
landscapeScreenHeight = $(window).height();
}
var tolerance = 25;
$(window).bind('resize', function(){
if((window.orientation === 0 || window.orientation === 180) &&
((window.innerHeight + tolerance) < portraitScreenHeight)){
// keyboard visible in portrait
}
else if((window.innerHeight + tolerance) < landscapeScreenHeight){
// keyboard visible in landscape
}
else{
// keyboard NOT visible
}
});
容差解释了横向高度与纵向宽度的不精确计算,反之亦然。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)