V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
buddie
V2EX  ›  CSS

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

  •  
  •   buddie · 2016-09-04 17:15:25 +08:00 via iPhone · 9515 次点击
    这是一个创建于 3003 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我记得很早听说微信浏览器对 flexbox 的兼容不是很好,最近想用用 flexbox 但用户很多是通过微信访问的,所以先来请教下。
    17 条回复    2016-10-18 10:41:31 +08:00
    banricho
        1
    banricho  
       2016-09-04 17:20:32 +08:00   ❤️ 1
    微信早换内核了,现在兼容性很好
    qiayue
        2
    qiayue  
       2016-09-04 17:25:00 +08:00   ❤️ 1
    weui 大量用了 flex 布局
    lovez
        3
    lovez  
       2016-09-04 17:51:48 +08:00 via Android   ❤️ 1
    @banricho 安卓 5.0 以下好像并不会直接用新内核,部分安卓手机在安装了最新的 QQ 浏览器情况下,重新安装微信,可能会用那个新的内核。 iOS9 以下, flex 需要写一些兼容语法。
    @qiayue weui 算不上大量使用吧,只是用了几个居中的,还有 flex: 0 1 ?具体忘了怎么写的了,只用了 3 种左右的吧,用的地方貌似只有 tab 那个组件用了。
    楼主可以查一些 flex 的兼容语法,可以看看 weui 里面怎么写的。
    buddie
        4
    buddie  
    OP
       2016-09-04 19:04:07 +08:00 via iPhone
    @lovez 好详细,非常感谢🙏
    happyz90
        5
    happyz90  
       2016-09-04 19:32:46 +08:00 via Android
    @lovez 微信中的内核和 QQ 浏览器无关的。新版本内核都是逐步放量的,现在应该大多数都升级到新内核了。看 ua 中 tbs 版本,如果是 03xxxx ,就是 blink 内核了。
    SourceMan
        6
    SourceMan  
       2016-09-04 19:34:46 +08:00 via iPhone
    已经全面支持了
    zsx
        7
    zsx  
       2016-09-04 19:46:37 +08:00
    现在版本的微信内核我记得是 Chrome 37 ,已经可以了。
    说着说着我就想黑 UC 浏览器
    Zao233
        8
    Zao233  
       2016-09-04 20:12:28 +08:00 via Android
    我记得前几个月有次打开某个链接发现内置的是个差不多完整的 QQ 浏览器,然后去 Play 市场给了 1 星
    maomaomao001
        9
    maomaomao001  
       2016-09-04 20:40:54 +08:00 via Android
    请问,如果想用微信 WebView 的话,是不是需要实名认证,填写 app 信息?还是直接能用?
    yangg
        10
    yangg  
       2016-09-04 21:32:27 +08:00 via iPhone
    用 autoprefixer 就差不多了
    http://caniuse.com/#feat=flexbox
    微信有的是 Android 4.3
    lovez
        11
    lovez  
       2016-09-04 21:48:10 +08:00   ❤️ 1
    @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
        12
    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
        13
    happyz90  
       2016-09-04 22:26:22 +08:00 via Android
    maomaomao001
        14
    maomaomao001  
       2016-09-04 23:52:44 +08:00 via Android
    @happyz90 我知道它的官网啊,看它的文档,似乎下载好 jar 包就能用,但事实上并不能用啊
    happyz90
        15
    happyz90  
       2016-09-05 00:05:27 +08:00 via Android
    @maomaomao001 可以啊?具体怎么不能用?
    reus
        16
    reus  
       2016-09-05 02:04:55 +08:00
    新内核没问题。问题是好多机器都没有新内核…… 不知道什么原因。所以都不用。
    qiukun
        17
    qiukun  
       2016-10-18 10:41:31 +08:00
    @reus 真 fullstack 啊您这是
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2901 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:24 · PVG 20:24 · LAX 04:24 · JFK 07:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.