完美解决 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修改如下:
各位如有更好的方法,请留言分享、讨论。
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" />
各位如有更好的方法,请留言分享、讨论。
相关文章推荐
- 解决jquery mobile+phonegap页面切换闪屏问题
- PhoneGap开发-解决跳转时闪屏的问题
- C# 完美解决窗体切换闪屏问题
- C# 完美解决窗体切换闪屏问题
- 完美解决日期天数加减问题
- 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新
- 域名泛解析,二级域名转向问题- -完美解决
- 完美解决Google最新的Design:TabLayout结合ViewPager无法显示Icon的问题
- 完美解决Mac Os 10.9或10.10下lxml安装问题
- 完美解决HALCON C#编程目标平台冲突问题
- Cocos2d-x 解决闪屏问题
- CentOS安装teamviewer遇到依赖包问题及完美解决
- java web项目加载不了jdbc问题的完美解决
- Adobe Illustrator 完美解决visio,Matlab图片插入Latex问题
- 完美解决Error:Execution failed for task ':APP:transformClassesWithDexForDebug'...问题
- (转)完美解决 Android WebView 文本框获取焦点后自动放大有关问题
- 完美解决35dir获取网站缩略图问题(两种方法)
- 完美解决PHP中的Cannot modify header information 问题
- 安卓开发之完美解决ADT和SDK不一致问题
- 完美解决axios在ie下的兼容性问题