您的位置:首页 > 其它

完美解决 Phonegap jQeuryMobile 闪屏 问题

2013-09-23 11:00 295 查看
在切换page或者弹出dialog时,会出现闪屏情况,综合网络上各种方法,得出以下方法可完美解决:

1、首先界面页面切换闪屏:

在加载jQuery后,加载jQuery Mobiel之前,插入js语句进行修复:

<script src="js/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

$(document).bind("mobileinit", function()

{

if (navigator.userAgent.indexOf("Android") != -1)

{

$.mobile.defaultPageTransition = 'none';

$.mobile.defaultDialogTransition = 'none';

}

});

</script>

<script src="js/jquery.mobile-1.3.2.min.js"></script>

2、修复弹出对话框闪屏

从弹出的对话框返回页面时,底部设置了fixed 的footer 会闪,解决方法为在该页面添加以下css(不影响页面外观):

<style type="text/css">

.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"],

.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active {

overflow: hidden;

-webkit-backface-visibility: hidden;

}

.ui-header {

position: fixed;

z-index:10;

top:0;

width:100%;

padding:0 0;

}

.ui-content {

padding-top: 57px;

padding-bottom: 54px;

overflow: auto;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

}

.ui-footer {

position: fixed;

z-index:10;

bottom:0;

width:100%;

}

</style>

3、补充,html头部信息meta修改如下:

< meta name="viewport" content="width=device-width, user-scalable=no" />


各位如有更好的方法,请留言分享、讨论。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: