[转]关于手机webview内核、默认浏览器、各家小程序的渲染层浏览器的区别和兼容性

[转]关于⼿机webview内核、默认浏览器、各家⼩程序的渲染层
浏览器的区别和兼容性
浏览器兼容性是前端常见问题，经常有⼈会问：我的代码在xx浏览器上可以⽤，为什么在HBuilder真机运⾏或打包的就有问题？
先说iOS。

iOS的webview有uiwebview和wkwebview的区别
Android⼿机的webview，分系统webview和x5两种
Android系统webview
关于如何查看Android⼿机端webview的版本：
1. ⽇志⾥查ua
2. 在系统设置⾥找到所有应⽤，显⽰隐藏系统进程，在⾥⾯找到Android system webview，显⽰的版本即为chrome版本。

Android⼿机默认浏览器和webview的区别
国外品牌的安卓⼿机，⾃带浏览器就是chrome。

⽽国内安卓⼿机，⾃带浏览器⼤多是QQ浏览器、UC浏览器的贴牌，极个别是⾃⼰改造chromium。

所以⼿机⾃带的浏览器并不等于webview，在⼀个平台可运⾏，不代表另⼀个平台可兼容。

QQ、UC、360等浏览器也基本是基于chromium做改造，不同版本的浏览器其使⽤的chromium内核版本也不⼀样。

具体可以打印ua查看。

注意夜神等安卓模拟器的Android版本是4.4，很多新语法都不⽀持。

如果你有影响⽤户的能⼒，为了给⽤户更好的体验，可以引导Android⽤户安装最新版Android system webview。

应⽤宝、华为、⾦⽴等应⽤市场均可下载这个apk，或者FQ到google play store。

在华为、⼩⽶、⾦⽴⼿机上，wifi下会⾃动更新Android system webview。

尤其是有些Android5⽤户使⽤的Android system webview 37版本，有硬件加速bug，闪屏花屏，此时升级webview即可解决。

有⼈问可否在打包时直接集成新版Android system webview，减少浏览器兼容问题？
webview体积⾄少50M起，体积实在太⼤了。

有兴趣的开发者可以⾃⼰研究离线打包。

倒是可以这样：js⾥判断当前⼿机是Android5以上，且webview版本过低，⽐如低于40（ua可以判断），可以提醒⽤户是否升级webview，然后引导⽤户去之前贴出的地址下载更新webview。

但不管怎么样，尽量少写可能遇到兼容性问题的代码。

Android App也可以使⽤x5 webview
各⼩程序平台的webview内核说明
各家⼩程序，在iOS上⼤多使⽤的是wkwebview内核，已知仅百度⼩程序是uiwebview。

wkwebview是iOS的⼀部分，其版本根据iOS 版本的不同⽽不同。

可以在caniuse直接看到iOS版本对应的浏览器兼容问题。

Android上各家⼩程序使⽤的是基于chromium改造的浏览器内核。

具体如下：
微信：⽼版微信使⽤的是x5，ua特征字符串有Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044903；后来微信团队⾃研了MWEB内
核，ua特征字符串有Chrome/67.0.3396.87 XWEB/882 MMWEBSDK/190506
百度⼩程序：ua特征是Chrome/63.0.3239.83，并且包含baiduboxapp字符串
⽀付宝⼩程序：根据⽀付宝版本，chrome有57和69等版本，ua特征字符串有NebulaSDK
QQ⼩程序：根据QQ版本，chrome有66和68等版本，ua特征字符串有QQ/MiniApp
头条⼩程序：ua特征是Chrome/62，ua特征字符串有ToutiaoMicroApp
uni-app中，js⽅⾯不存在浏览器兼容问题，因为js都使⽤的是独⽴的js引擎，与webview⽆关，API也是仅⼩程序⽀持的API才可以使⽤。

所以uni-app的浏览器兼容性问题，主要是css。

注意不要使⽤太新的css就可以。