微信内置浏览器对 flexbox 的兼容如何？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 3013 天前的主题，其中的信息可能已经有所发展或是发生改变。

我记得很早听说微信浏览器对 flexbox 的兼容不是很好，最近想用用 flexbox 但用户很多是通过微信访问的，所以先来请教下。

flexbox

微信

浏览器

兼容

17 条回复 • 2016-10-18 10:41:31 +08:00

banricho

2016-09-04 17:20:32 +08:00

微信早换内核了，现在兼容性很好

qiayue

2016-09-04 17:25:00 +08:00

weui 大量用了 flex 布局

lovez

2016-09-04 17:51:48 +08:00 via Android

@banricho 安卓 5.0 以下好像并不会直接用新内核，部分安卓手机在安装了最新的 QQ 浏览器情况下，重新安装微信，可能会用那个新的内核。 iOS9 以下， flex 需要写一些兼容语法。
@qiayue weui 算不上大量使用吧，只是用了几个居中的，还有 flex: 0 1 ？具体忘了怎么写的了，只用了 3 种左右的吧，用的地方貌似只有 tab 那个组件用了。
楼主可以查一些 flex 的兼容语法，可以看看 weui 里面怎么写的。

buddie

2016-09-04 19:04:07 +08:00 via iPhone

@lovez 好详细，非常感谢🙏

happyz90

2016-09-04 19:32:46 +08:00 via Android

@lovez 微信中的内核和 QQ 浏览器无关的。新版本内核都是逐步放量的，现在应该大多数都升级到新内核了。看 ua 中 tbs 版本，如果是 03xxxx ，就是 blink 内核了。

SourceMan

2016-09-04 19:34:46 +08:00 via iPhone

已经全面支持了

zsx

2016-09-04 19:46:37 +08:00

现在版本的微信内核我记得是 Chrome 37 ，已经可以了。
说着说着我就想黑 UC 浏览器

Zao233

2016-09-04 20:12:28 +08:00 via Android

我记得前几个月有次打开某个链接发现内置的是个差不多完整的 QQ 浏览器，然后去 Play 市场给了 1 星

maomaomao001

2016-09-04 20:40:54 +08:00 via Android

请问，如果想用微信 WebView 的话，是不是需要实名认证，填写 app 信息？还是直接能用？

yangg

2016-09-04 21:32:27 +08:00 via iPhone

用 autoprefixer 就差不多了
http://caniuse.com/#feat=flexbox
微信有的是 Android 4.3

lovez

2016-09-04 21:48:10 +08:00

@happyz90 5.0 以下应该是不会自动升级的。。。 5 月多做的一个小项目，本来也以为微信支持应该很好了，大量用了 flex ，感觉特别爽，结果项目上线以后直接傻眼了，只有 iOS9 和安卓 5.0 以上的用户可以正常显示，很多都排版乱了。当时还找了很多让微信浏览器内核升级到 x5 的方法，只找到了一个，说可能跟安装的浏览器有关系，安装最新版 qq 浏览器，然后重装微信，可能可以升级。我这边测试了我自己的手机，我的是安卓 4.4 ， root 了，这样是可以升级到新的内核的。当时也让一些排版显示乱的用户，按照这个方法，看看能不能升级内核，好像大部分死活都没法升级。
@buddie 其实微信内还是可以用 flex 的，只要用兼容写法，大部分都可以支持， space-around 这个是不能用的，但是也可以在 flex-item 写 .flex-item1{ flex: 1} .flex-item2{flex: 2} .flex-item3 {flex: 1} 这样模拟出来。
https://segmentfault.com/a/1190000003978624#articleHeader2
我当时就参考的这个文章，还有 weui 的源码

zhouquanbest

2016-09-04 22:07:44 +08:00

微信现在还不错刚一个项目我全用了 flex （客串下前端看这个最方便
微信表现破费但试了下 UC 和 Android4.4 以下的系统当时就 2 了
因为历史原因没法用 less 等网上找了个叫 flex.css 的来解决了兼容问题（懒得写那么多 prefix autopefix 不知道为何表现不佳
目测除了当 height 设为 0 padding bottom 不为 0 时使用 flex 各个浏览器表现不同外就没啥别的坑了

happyz90

2016-09-04 22:26:22 +08:00 via Android

@maomaomao001 http://x5.tencent.com

maomaomao001

2016-09-04 23:52:44 +08:00 via Android

@happyz90 我知道它的官网啊，看它的文档，似乎下载好 jar 包就能用，但事实上并不能用啊

happyz90

2016-09-05 00:05:27 +08:00 via Android

@maomaomao001 可以啊？具体怎么不能用？

reus

2016-09-05 02:04:55 +08:00

新内核没问题。问题是好多机器都没有新内核…… 不知道什么原因。所以都不用。

qiukun

2016-10-18 10:41:31 +08:00

@reus 真 fullstack 啊您这是