V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Francost
V2EX  ›  程序员

安卓版微信如何解决不支持 flex 布局的问题

  •  
  •   Francost · 2016-01-26 16:33:33 +08:00 · 6562 次点击
    这是一个创建于 3216 天前的主题,其中的信息可能已经有所发展或是发生改变。
    项目中大量采用 flex 布局,可是安卓的微信偏偏不支持最新的 display:flex,而支持最老的 display:-webkit-box ,查遍网络,都说写写兼容就好了,将 display:-webkit-box 写进去,但是我写了也没有效果,项目马上就要上线了,不想再改布局和 css 了,有什么解决办法吗?
    18 条回复    2016-01-28 00:40:13 +08:00
    ccbikai
        1
    ccbikai  
       2016-01-26 17:01:34 +08:00
    还真没其他办法,除了写兼容,改布局代码。


    开发之前,先考虑要兼容的浏览器,环境什么的,再决定使用不使用新潮的技术, 这是前端必须知道的
    portals
        2
    portals  
       2016-01-26 17:14:27 +08:00
    安卓微信支持 display: -webkit-box;
    portals
        3
    portals  
       2016-01-26 17:16:21 +08:00
    用 autoprefixer 可解决大部分问题 但是某些属性无法使用
    比如 justify-content: space-around;
    yseternal
        4
    yseternal  
       2016-01-26 19:59:28 +08:00
    你应该尽早在微信上测试,这是自己的锅,甩不掉。

    虽然有办法用老式的方式兼容,但 justify-content 之类重要
    的属性还是不支持。既然要做微信网页,就尽量不用 flex
    iTakeo
        5
    iTakeo  
       2016-01-26 20:00:09 +08:00 via iPhone
    老版本可以兼容
    Francost
        6
    Francost  
    OP
       2016-01-26 22:07:10 +08:00
    @portals 恩,微信支持最老版本的 flex 布局,但是我也把代码写进去了,可是效果和 iPhone 上还是有差别
    Francost
        7
    Francost  
    OP
       2016-01-26 22:08:17 +08:00
    @ccbikai 开发之前只说先做 iPhone 的适配,后来才加入安卓的,我以为安卓和 iPhone 差不多,都是 webkit 内核嘛,没想到安卓的微信竟然不支持 flex
    fhefh
        8
    fhefh  
       2016-01-26 22:35:23 +08:00
    http://caniuse.com/ 每次都在看这个~
    wxt2005
        9
    wxt2005  
       2016-01-26 22:42:06 +08:00
    没啥办法,改吧。
    腾讯的 X5 内核是个天坑,但是没办法,它起码(用一个非常低的标准)统一了 Android 混乱不堪的浏览器环境。
    fszaer
        10
    fszaer  
       2016-01-26 23:21:23 +08:00
    @Francost
    太天真,虽然移动端没有了 ie 这类下限
    但是各家的浏览器实现别看是同内核,不少特性之间的差异简直多的飞起
    banricho
        11
    banricho  
       2016-01-27 00:45:57 +08:00
    安卓上浏览器坑多的去了,什么 UC 百度搜狗 QQ 微信,出问题基本就这几个
    老内核改的最后跟不上时代……

    哦对了,还有个奇葩, flyme 内置的浏览器,最新版依然有问题
    Francost
        12
    Francost  
    OP
       2016-01-27 09:59:51 +08:00
    @fszaer 我现在知道我真的很天真
    Francost
        13
    Francost  
    OP
       2016-01-27 10:01:11 +08:00
    @banricho 我不知道为啥这些厂商会自己造轮子呢?技术不成熟还自己造轮子
    banricho
        14
    banricho  
       2016-01-27 12:03:13 +08:00 via Android
    @Francos 😂表示不解。而且就算是 QQ 浏览器和微信都是 X5 ,表现都是不一致的。。。
    leeyuzhe
        15
    leeyuzhe  
       2016-01-27 12:30:24 +08:00 via Android
    安卓 6.0+上的微信调用的是 chrome 而不是那个什么 x5 ,然后,我一直在我的 Nexus6 上调试开发的,一点问题没有。到最后项目快上线了,特码才发现在同事手机上所谓的 x5 内核简直死妈
    Francost
        16
    Francost  
    OP
       2016-01-27 20:36:16 +08:00
    @leeyuzhe 哈哈哈哈哈哈,每个遇到 X5 内核的人都会骂娘的,我都准备重新写布局了
    Francost
        17
    Francost  
    OP
       2016-01-27 20:37:26 +08:00
    @banricho 因为 X5 内核的 chrome 版本是老的 5.3.4 , QQ 则要更新一点,所以表现不一致很正常
    kamushin
        18
    kamushin  
       2016-01-28 00:40:13 +08:00
    @Francost 用别人的轮子得花钱呗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2739 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 15:20 · PVG 23:20 · LAX 07:20 · JFK 10:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.