android – jQuery Mobile固定页脚在键盘出现时移动

栏目: jQuery · 发布时间: 6年前

内容简介:翻译自:https://stackoverflow.com/questions/13097663/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 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>

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

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

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

翻译自:https://stackoverflow.com/questions/13097663/jquery-mobile-fixed-footer-is-moving-when-the-keyboard-appears


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web Security, Privacy and Commerce, 2nd Edition

Web Security, Privacy and Commerce, 2nd Edition

Simson Garfinkel / O'Reilly Media / 2002-01-15 / USD 44.95

Since the first edition of this classic reference was published, World Wide Web use has exploded and e-commerce has become a daily part of business and personal life. As Web use has grown, so have ......一起来看看 《Web Security, Privacy and Commerce, 2nd Edition》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具