今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这“移动端的IE6 ”了,可以早点回家了!!!
那真实情况是不是这样呢?正好最近在做一款微信的小游戏,项目结束后,我做了一个小的总结,分享如下,时间宝贵,先上结论。

结论

总的来说,自从微信4月升级 X5 Blink内核之后,兼容性大大好转。

  1. 安卓版的微信浏览器,全面升级为TBS2.0 (基于Android 5.0 WebView Blink内核,Chrome 37),所有版本的安卓系统均为同一内核,开发只需考虑适屏问题了,HTML5和CSS3均有较好的支持(基于Chrome 37,详情可以上caniuse查)。
  2. IOS虽说没有升级统一为同一版本的内核,但IOS版本的微信一直是WKWebView内核,WKWebView的版本依赖于IOS的版本。 IOS 8.0(下文有IOS8以下系统的占比,可忽略)以上的系统,对Html5和css3的支持率也很高,基本的H5,CSS3的特性均得到支持,测试中有详细数据。
  3. 兼容性详情请查看html5和css3测试或直接用真机在以下提供的测试地址测试。

从我最近调试游戏和微信端的页面和以下测试来看,基本和媒体预期一致,Html5和Css3兼容良好。希望后面X5的Blink能够保持一定节奏的更新,不要那么多坑。

真机测试

html5测试

测试地址:https://html5test.com/

测试结果:

  1. honor 7:475分 安卓6.0 测试报告: https://html5test.com/s/e61f0b2ed3825842.html
  2. vivo xplay:475分 安卓4.2 测试报告: https://html5test.com/s/9b411b2ed390367b.html
  3. iphone4:401分 iOS 9.3.1 测试报告: http://html5test.com/s/e0c5562ed81761a7.html
  4. iphone6 plus: 387分 IOS 8.4 测试报告: https://html5test.com/s/e5b68e2ed8206f48.html

css3测试

该网站不支持输出报告:( ,只截了一个图。
(说明,chrome 49 测试支持度为:52%,相对来说,下面浏览器的测试对CSS3的支持度还是比较高的 )

测试地址:http://css3test.com/

  1. honor 7 安卓6.0 :49%
  2. vivo xplay 安卓4.2:49%
  3. iphone4 iOS 9.3.1:56%
  4. iphone6 plus IOS 8.4 :51%

注:从Layabox引擎的游戏运营统计数据上看,低于IOS 8.0的游戏用户终端占比仅为3%左右。几可忽略不计。

FYI

官方人员说明

http://bbs.mb.qq.com/thread-202308-1-1.html

基于BLINK的新X5内核已经在手机QQ浏览器上上线了,最近在微信、手机QQ、空间上灰度。 4月份应该会全量发布。
很抱歉给大家的开发带来了不便。
这里介绍一下微信、手机QQ、空间内嵌X5的背景:最初是因为在微信发现系统WebView的一些安全漏洞,对微信业务影响非常严重,但是这些漏洞单纯在APP侧无法解决,所以微信提出要求内嵌X5内核替换系统WebView。后来手机QQ、空间也提出了内嵌X5的需求。所以为了APP的安全考虑,这里是不可能让前端控制用不用X5的,不然的话,恶意的网站直接跳过X5,利用系统WebView的安全漏洞,就可以获取用户的银行账号等信息了。
内嵌X5最初是解决APP的问题,主要是APP终端开发的述求,前端同学没有参与,上线后,给前端同学带来了一些挑战,这主要是因为之前的X5内核是基于Android 4.2 WebView定制优化而来的,很多H5, CSS3属性支持是以Android 4.2系统为基础的,虽然后续我们在此基础上做了增强,但是比起Chrome的Blink内核,还是要差很多。 而Android 4.4开始,系统WebView切换到了Blink内核,所以导致在新Android机型上,X5内核的一些CSS3/H5支持弱于系统WebView。
为了解决这个问题,去年X5内核团队,投入了全部人力,全力将X5内核升级到了Blink。 全新的X5内核基于Android 5.0系统的Blink内核,已经在15年11月份在QQ浏览器6.2版本上线,经过两个版本的迭代,现在基本稳定,近期已经开始在微信、手机QQ和空间上灰度,预期会在4月份全量上线。新内核上线后,会在新Android版本手机上对齐Chrome blink内核在前端的表现能力,同时在低版本的Android手机上也提供相同表现能力,相信会给前端同学带来更多的想象空间。

报道

  1. Layabox 解读微信全面升级 X5 Blink 内核
  2. iOS 8 HTML5性能测试:苹果有多爱HTML5?

    相关信息

官网:http://x5.tencent.com/

内核信息:http://x5.tencent.com/guide?id=4000

  1. 内核基准从WebKit升级到Blink版本,更高的性能,更完善的H5/CSS3支持。
  2. 内核版本号升级到362xx版本。 可以根据UserAgent判断当前环境是否已升级到 TBS2.0版本,包含(TBS/03xxxx)字段
  3. 更完善的H5支持,HTML5跑分475
  4. CSS3属性支持增强,完整支持flex
  5. 更完善的filter支持
  6. 支持Spdy 3.1
  7. 动画性能提升
  8. 支持伪元素动画效果
  9. 更好的inspector支持

caniuse测试: http://res.imtt.qq.com/tbs/incoming20160419/home.html

调试方法:http://bbs.mb.qq.com/thread-1143161-1-1.html

微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结的更多相关文章

  1. 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼

    2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼   转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升:IE10 随着 Windows 8 在 ...

  2. 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼【转】

    摘要: 这篇文章给大家带来<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>,让我们一起来看看2013年的浏览器现状.浏览器厂商之间的竞争促使各大浏览器对 HTML5 和 CSS3 ...

  3. 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

  4. js判断移动端浏览器类型,微信浏览器、支付宝小程序、微信小程序等

    起因 现在市场上各种跨平台开发方案百家争鸣各有千秋,个人认为最成熟的还是hybird方案,简单的说就是写H5各种嵌入,当然作为前端工程师最希望的也就是公司采用hybird方案当作技术路线. 所谓的hy ...

  5. 显示3行,还要省略号(这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器)

    div{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:; -webkit- ...

  6. JS 判断PC、android、ios、微信浏览器

    1.通过js userAgent来判断 <h1>判断访问此链接的操作系统</h1> <script> var Agents = new Array("An ...

  7. C#判断用户是否使用微信浏览器,并据此来显示真实内容或二维码

    平时我们看一些网页的时候会发现这样的功能:有的页面只能在微信里访问,如果在电脑上访问就只显示当前地址的二维码.这个用C#怎么实现呢?我们结合代码来看看. 首先,我们需要先判断用户使用的是什么浏览器,这 ...

  8. php 判断是否在微信浏览器中打开

    <?php $a=false; $b=$_SERVER['HTTP_USER_AGENT']; if(strpos($b,"MicroMessenger")===false) ...

  9. 清除微信浏览器网址的缓存,cookie

    清理微信浏览网站的缓存,Cookie http://blog.csdn.net/cui55/article/details/53939462 怎么清除IOS微信浏览器中的cookie? 退出微信重新登 ...

随机推荐

  1. GIT的认识

    说实话,在听到小伙伴们都说赶紧做作业的时候很茫然,连一点头绪都没有,根本不知道从何入手,但不能因为不会就不去做,于是还是拿起手机,找到小伙伴商量着做着,虽然等的过程很焦急,但还是注册成功了.而开始写对 ...

  2. SQL基础--同义词

    同义词的概念: 同义词是Oracle对象的别名,使用同义词访问相同的对象 可以为表.视图.存储过程.函数或另一同义词等对象创建同义词 方便访问其它用户的对象,隐藏了对象的身份 缩短对象名字的长度 同义 ...

  3. SQLPrompt 7.2发布

    SQLPrompt 7.2发布 下载地址:http://www.red-gate.com/products/sql-development/sql-prompt/ 红门的热门产品SQLPrompt 发 ...

  4. MongoDB 初见指南

    技术若只如初见,那么还会踩坑么? 在系统引入 MongoDB 也有几年了,一开始是因为 MySQL 中有单表记录增长太快(每天几千万条吧)容易拖慢 MySQL 的主从复制.而这类数据增长迅速的流水表, ...

  5. 搭建Linux+Jexus+MariaDB+ASP.NET[LJMA]环境

    备注:,将我的博客内容整理成册,首先会在博客里优先发布,后续可能的话整理成电子书,主要从linux的最基础内容开始进入Linux的Mono开发方面的话题.本文是我整理博客内容的一篇文章. LJMA 是 ...

  6. 标准数据源访问库 - JayData

    JayData 是一个标准的.跨平台的库和方法,用于访问和操作各种不同的数据源,最适合用于 JavaScript 和 HTML5 应用. 官方网站:http://jaydata.org/  ASP.N ...

  7. NodeJS入门(五)—— process对象

    process对象用于处理与当前进程相关的事情,它是一个全局对象,可以在任何地方直接访问到它而无需引入额外模块. 它是 EventEmitter 的一个实例. 本章的示例可以从我的Github上下载到 ...

  8. 剑指Offer面试题:18.二叉树的镜像

    一.题目:二叉树的镜像 题目:请完成一个函数,输入一个二叉树,该函数输出它的镜像.例如下图所示,左图是原二叉树,而右图则是该二叉树的镜像. 该二叉树节点的定义如下,采用C#语言描述: public c ...

  9. C#图片色彩的纠正-上

    WPF(C#)图片色彩的纠正-上 WPF(C#)图片色彩的纠正-下 前言 对图片进行色彩的纠正,其实与WPF是没有什么关系的,为什么标题又是“WPF(C#)图片色彩的纠正”呢,因为这些图片色彩的纠正功 ...

  10. 【干货】JS版汉字与拼音互转终极方案,附简单的JS拼音输入法

    前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...