不废话 直接上图看效果
Android 5.0的效果
Android4.4的效果
那为什么会出现这种效果呢？
原因：
WebView是android系统提供能显示网页的系统控件，它是一个特殊的View，同时它也是一个ViewGroup可以有很多其他子View。在Android 4.4以下(不包含4.4)系统WebView底层实现是采用WebKit内核，而在Android 4.4及其以上Google 采用了chromium内核作为系统WebView的底层内核支持。在这一变化中Android 提供的WebView相关API并没有发生大变化，在4.4上也兼容低版本的API并且引进了少部分API。这里简单介绍下基于Chromium 的Webview和基于Webkit webview的差异，基于Chromium Webview提供更广的HTML5,CSS3,JavaScript支持，在目前最新Android 系统版本5.0上基于chromium 37，Webview提供绝大多数的html5特性支持。Webkitjavascript引起采用WebCore Javascript 在Android 4.4上换成了V8能直接提升JavaScript性能。另外Chromium 支持远程调试(Chrome DevTools)。
WebKit for WebView VS Chromium for WebView性能比对
Webkit Chromium 备注
HTML5 278 434 http://html5test.com
远程调试 不支持 支持 Android 4.4及以上支持
内存占用 小 大 相差20-30M左右
WebAudio 不支持 支持 Android 5.0及以上支持
WebGL 不支持 支持 Android 5.0及以上支持
WebRTC 不支持 支持 Android 5.0及以上支持
因此问题在于WebView内核上，为了解决适配问题，只能使用第三方内核
本人在这里使用的是腾讯的TbsX5(腾讯浏览服务) 点我下载
怎么使用？
1.jar包
将jar导入到libs目录下
2.so库
在main文件下创建jniLibs
3.引入ndk
x5暂时不提供64位so文件，为了保证64位手机能正常加载x5内核，官方给出的64位手机解决方案
打开对应app中的build.gradle文件,在文件的android{}中的defaultConfig{}里添加如下配置:
ndk{abiFilters "armeabi", "armeabi-v7a", "x86", "mips"}
4.添加权限
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
5.X5WebView引入
使用X5WebView我们还要添加一个X5WebView.java类
public class X5WebView extends WebView {
private WebViewClient client = new WebViewClient() {
// 防止加载网页时调起系统浏览器
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
};
public X5WebView(Context arg0) {
super(arg0);
setBackgroundColor(85621);
}
@SuppressLint("SetJavaScriptEnabled")
public X5WebView(Context arg0, AttributeSet arg1) {
super(arg0, arg1);
this.setWebViewClient(client);
// this.setWebChromeClient(chromeClient);
// WebStorage webStorage = WebStorage.getInstance();
initWebViewSettings();
this.getView().setClickable(true);
}
private void initWebViewSettings() {
WebSettings webSetting = this.getSettings();
webSetting.setJavaScriptEnabled(true);
webSetting.setJavaScriptCanOpenWindowsAutomatically(true);
webSetting.setAllowFileAccess(true);
webSetting.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
webSetting.setSupportZoom(true);
webSetting.setBuiltInZoomControls(true);
webSetting.setUseWideViewPort(true);
webSetting.setSupportMultipleWindows(true);
// webSetting.setLoadWithOverviewMode(true);
webSetting.setAppCacheEnabled(true);
// webSetting.setDatabaseEnabled(true);
webSetting.setDomStorageEnabled(true);
webSetting.setGeolocationEnabled(true);
webSetting.setAppCacheMaxSize(Long.MAX_VALUE);
// webSetting.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);
webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);
// webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH);
webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);
}
}
6.Application中X5的预加载
public class BaseApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
initTBS();
}
/**
* 初始化TBS浏览服务X5内核
*/
private void initTBS() {
//搜集本地tbs内核信息并上报服务器，服务器返回结果决定使用哪个内核。
QbSdk.setDownloadWithoutWifi(true);//非wifi条件下允许下载X5内核
QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {
@Override
public void onViewInitFinished(boolean arg0) {
//x5內核初始化完成的回调，为true表示x5内核加载成功，否则表示x5内核加载失败，会自动切换到系统内核。
Log.d("app", " onViewInitFinished is " + arg0);
}
@Override
public void onCoreInitFinished() {}
};
//x5内核初始化接口
QbSdk.initX5Environment(getApplicationContext(), cb);
}
}
最后 在xml中把引用WebView 全部替换为X5WebView即可。