您的位置:首页 > Web前端 > JQuery

PhoneGap + JQueryMobile + HTML5

2014-03-14 14:43 330 查看
此文章仅是为了给自己做个备注,或是提供给和我一样初学的、碰到相同问题的人们,高手请勿吐槽...

最近自己搞了一个PhoneGap + JQueryMobile + HTML5做Android的小应用,安装在手机上后,发现在转场的过程中,页面会有非常强列的闪屏,这对于用户体验来说是非常不爽的,这个硬伤必须克服。

所以就找资料,网上说的最多的无非就是两种方式:

1)官方提供的修改css

.ui-page { -webkit-backface-visibility: hidden; }


这是我现在试下来最没有效果的,不知道会不会根据各版本不同而有不同的效果,我使用的JQueryMobile版本是1.4.2

2)修改JQueryMobile的默认配置

$(document).bind("mobileinit", function(){
$.extend(  $.mobile , {
  defaultPageTransition: 'none'
});
});


这个确实有些效果,至少闪屏抖动不像原来那么大,但还是没彻底解决,体验还是不佳

终于在某一天,被我找到一个第三种可尝试的方法,Oh my god,原来这就是我想要的

在AndroidManifest.xml中设置

<application android:debuggable="true"
android:hardwareAccelerated="false"
android:icon="@drawable/icon"
android:label="@string/app_name">
<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
android:label="@string/app_name"
android:name="CST" android:theme="@android:style/Theme.Black.NoTitleBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>


以上代码第二行,默认为[ android:hardwareAccelerated="true" ],把它改成false,意思是关闭Android的硬件加速


                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: