安卓版微信如何解决不支持 flex 布局的问题 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
Francost
V2EX    程序员

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

  •  
  •   Francost 2016-01-26 16:33:33 +08:00 6984 次点击
    这是一个创建于 3548 天前的主题,其中的信息可能已经有所发展或是发生改变。
    项目中大量采用 flex 布局,可是安卓的微信偏偏不支持最新的 display:flex,而支持最老的 display:-webkit-box ,查遍网络,都说写写兼容就好了,将 display:-webkit-box 写进去,但是我写了也没有效果,项目马上就要上线了,不想再改布局和 css 了,有什么解决办法吗?
    18 条回复    2016-01-28 00:40:13 +08:00
    ccbikai
        1
    ccbikai  
    PRO
       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     Solana     3265 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 24ms UTC 11:32 PVG 19:32 LAX 04:32 JFK 07:32
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86