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用户体验解构

见微知著-WEB用户体验解构

李清 / 机械工业出版社 / 2010-4 / 36.00元

本书用解构分析的方法,系统全面地介绍了Web页面设计的相关知识和要素。 本书从整体到局部地对网站的元素进行解构,包括网站整体布局、整体配色方案,到网站各个功能区域,如登录区、内容区、广告区等,最后到按钮、反馈、验证码、字体、文字语气等多个细节元素。本书通过解构这些元素来讲述如何对用户体验设计进行优化,如何进行搜索引擎优化。 本书适用于网站交互设计师、视觉设计师、产品经理、网站设计人员、......一起来看看 《见微知著-WEB用户体验解构》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

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

URL 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具