此文章仅是为了给自己做个备注,或是提供给和我一样初学的、碰到相同问题的人们,高手请勿吐槽...
最近自己搞了一个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的硬件加速