微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结
今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这“移动端的IE6 ”了,可以早点回家了!!!
那真实情况是不是这样呢?正好最近在做一款微信的小游戏,项目结束后,我做了一个小的总结,分享如下,时间宝贵,先上结论。
结论
总的来说,自从微信4月升级 X5 Blink内核之后,兼容性大大好转。
- 安卓版的微信浏览器,全面升级为TBS2.0 (基于Android 5.0 WebView Blink内核,Chrome 37),所有版本的安卓系统均为同一内核,开发只需考虑适屏问题了,HTML5和CSS3均有较好的支持(基于Chrome 37,详情可以上caniuse查)。
- IOS虽说没有升级统一为同一版本的内核,但IOS版本的微信一直是WKWebView内核,WKWebView的版本依赖于IOS的版本。 IOS 8.0(下文有IOS8以下系统的占比,可忽略)以上的系统,对Html5和css3的支持率也很高,基本的H5,CSS3的特性均得到支持,测试中有详细数据。
- 兼容性详情请查看html5和css3测试或直接用真机在以下提供的测试地址测试。
从我最近调试游戏和微信端的页面和以下测试来看,基本和媒体预期一致,Html5和Css3兼容良好。希望后面X5的Blink能够保持一定节奏的更新,不要那么多坑。
真机测试
html5测试
测试结果:
- honor 7:475分 安卓6.0 测试报告: https://html5test.com/s/e61f0b2ed3825842.html
- vivo xplay:475分 安卓4.2 测试报告: https://html5test.com/s/9b411b2ed390367b.html
- iphone4:401分 iOS 9.3.1 测试报告: http://html5test.com/s/e0c5562ed81761a7.html
- iphone6 plus: 387分 IOS 8.4 测试报告: https://html5test.com/s/e5b68e2ed8206f48.html
css3测试
该网站不支持输出报告:( ,只截了一个图。
(说明,chrome 49 测试支持度为:52%,相对来说,下面浏览器的测试对CSS3的支持度还是比较高的 )
测试地址:http://css3test.com/
- honor 7 安卓6.0 :49%
- vivo xplay 安卓4.2:49%
- iphone4 iOS 9.3.1:56%
- 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手机上也提供相同表现能力,相信会给前端同学带来更多的想象空间。
报道
内核信息:http://x5.tencent.com/guide?id=4000
- 内核基准从WebKit升级到Blink版本,更高的性能,更完善的H5/CSS3支持。
- 内核版本号升级到362xx版本。 可以根据UserAgent判断当前环境是否已升级到 TBS2.0版本,包含(TBS/03xxxx)字段
- 更完善的H5支持,HTML5跑分475
- CSS3属性支持增强,完整支持flex
- 更完善的filter支持
- 支持Spdy 3.1
- 动画性能提升
- 支持伪元素动画效果
- 更好的inspector支持
caniuse测试: http://res.imtt.qq.com/tbs/incoming20160419/home.html
调试方法:http://bbs.mb.qq.com/thread-1143161-1-1.html
微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结的更多相关文章
- 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼
2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼 转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升:IE10 随着 Windows 8 在 ...
- 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼【转】
摘要: 这篇文章给大家带来<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>,让我们一起来看看2013年的浏览器现状.浏览器厂商之间的竞争促使各大浏览器对 HTML5 和 CSS3 ...
- 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
- js判断移动端浏览器类型,微信浏览器、支付宝小程序、微信小程序等
起因 现在市场上各种跨平台开发方案百家争鸣各有千秋,个人认为最成熟的还是hybird方案,简单的说就是写H5各种嵌入,当然作为前端工程师最希望的也就是公司采用hybird方案当作技术路线. 所谓的hy ...
- 显示3行,还要省略号(这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器)
div{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:; -webkit- ...
- JS 判断PC、android、ios、微信浏览器
1.通过js userAgent来判断 <h1>判断访问此链接的操作系统</h1> <script> var Agents = new Array("An ...
- C#判断用户是否使用微信浏览器,并据此来显示真实内容或二维码
平时我们看一些网页的时候会发现这样的功能:有的页面只能在微信里访问,如果在电脑上访问就只显示当前地址的二维码.这个用C#怎么实现呢?我们结合代码来看看. 首先,我们需要先判断用户使用的是什么浏览器,这 ...
- php 判断是否在微信浏览器中打开
<?php $a=false; $b=$_SERVER['HTTP_USER_AGENT']; if(strpos($b,"MicroMessenger")===false) ...
- 清除微信浏览器网址的缓存,cookie
清理微信浏览网站的缓存,Cookie http://blog.csdn.net/cui55/article/details/53939462 怎么清除IOS微信浏览器中的cookie? 退出微信重新登 ...
随机推荐
- Python调用C++的DLL
import os import sys from ctypes import * test = cdll.LoadLibrary('D:\Python27\py.dll') print test.A ...
- CSharpGL(2)设计和使用场景元素及常用接口
CSharpGL(2)设计和使用场景元素及常用接口 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo,更适合入 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (15) -----第三章 查询之与列表值比较和过滤关联实体
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-8与列表值比较 问题 你想查询一个实体,条件是给定的列表中包含指定属性的值. 解 ...
- Service基础使用
Service基础使用 之前的文章一直介绍Activity的使用,很多知识和用法单一的配合Activity使用,这次将总结Android四大组件之二--Service. 本文将要介绍以下内容: Ser ...
- Android开发学习之路-Android Studio真神器!
放假之后电脑配置升级就开始用Android Studio(下面简称AS)了,那个酸爽真的不是一般的啊,这里开一篇博客来记录下AS里面各种酷炫的功能,有更好玩的,大家不要吝啬,评论告诉我吧! 最近And ...
- Unknown lifecycle phase "mvn". You must specify a valid lifecycle phase or a goal in the format <plugin-prefix>:<goal> or <plugin-group-id>:<plugin-artifact-id>[:<plugin-version>]:<goal>
在用maven命令启动storm时候,命令行是:mvn exec:java -Dexec.mainClass="TopologyMain" -Dexec.args="sr ...
- Sql Server系列:系统函数
1. 返回表中指定字段的长度值COL_LENGTH 返回列的定义长度(以字节为单位). 语法: COL_LENGTH ( 'table' , 'column' ) 示例: SELECT COL_LEN ...
- OpenCASCADE Documentation System
OpenCASCADE Documentation System eryar@163.com Abstract. Doxygen is the de facto standard tool for g ...
- 用pageGroup.js实现分页功能
1.html页面中 引入 <link rel="stylesheet" type="text/css" href="/stylesheets/p ...
- Android okHttp网络请求之文件上传下载
前言: 前面介绍了基于okHttp的get.post基本使用(http://www.cnblogs.com/whoislcj/p/5526431.html),今天来实现一下基于okHttp的文件上传. ...