当键盘出现时,jQuery Mobile固定页脚正在移动

Question

我使用Phonegap和jQuery Mobile设计了一个应用程序.固定页脚正常工作,直到我点击下拉列表或文本字段,这会导致页脚从视图中消失(Android 4.0)或移动到视图的中间(Android 2.2 Galaxy Tab).有什么建议？

Phonegap版本:Cordova 2.1.0
jQuery Mobile版本: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>

Answer 1

我在某些设备中显示了页脚显示的问题而在其他设备中没有显示问题.我发现这对我有用:

var initialScreenSize = window.innerHeight;
window.addEventListener("resize", function() {
    if(window.innerHeight < initialScreenSize){
        $("[data-role=footer]").hide();
    }
    else{
        $("[data-role=footer]").show();
    }
});

编辑:

但方向改变怎么样？

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
    }
});

公差考虑了纵向高度与纵向宽度的不精确计算,反之亦然.