jQuery Mobile 固定页脚在键盘出现时移动 [英] jQuery Mobile fixed footer is moving when the keyboard appears

问题描述

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

Phonegap 版本:Cordova 2.1.0
jQuery 移动版:1.2.0

这是我的代码:

<div data-role="navbar" class="nav-mobilyzer" data-grid="d"><h1>页脚</h1>

解决方案

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

var initialScreenSize = window.innerHeight;window.addEventListener("resize", function() {如果(window.innerHeight 

但是方向变化呢?

var PortraitScreenHeight;var LandscapeScreenHeight;if(window.orientation === 0 || window.orientation === 180){PortraitScreenHeight = $(window).height();LandscapeScreenHeight = $(window).width();}别的{PortraitScreenHeight = $(window).width();LandscapeScreenHeight = $(window).height();}var 容差 = 25;$(window).bind('resize', function(){if((window.orientation === 0 || window.orientation === 180) &&((window.innerHeight + 容差) 

容差导致横向高度与纵向宽度的计算不准确，反之亦然.

I have designed an app using Phonegap and jQuery Mobile. The fixed footer works properly until I click on a dropdown or text field, which causes the footer to either disappear from view (Android 4.0) or move to the middle of the view (Android 2.2 Galaxy Tab). Any suggestions?

Phonegap Version: Cordova 2.1.0
jQuery Mobile Version: 1.2.0

Here is my code:

<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>

解决方案

I had the problem in some devices the footer displayed and in others it didn't. I found this worked for me:

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

EDIT:

But what about orientation changes?

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

The tolerance accounts for the inexact calculation of landscape height with portrait width and vis-versa.

这篇关于jQuery Mobile 固定页脚在键盘出现时移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！