部分安卓设备 webview 和 UC 等浏览器问题汇总

[minwe]

存在问题

动画流畅程度

https://github.com/amazeui/amazeui-touch/issues/23#issuecomment-197733052

android webapp 性能就那样, 这和react 以及 amaze 没啥关系.

Flexbox 兼容性问题

合并过来的 issue

• amazeui/amazeui#852
• #24
• #18

• 38 NavBar 在小米手机微信中显示问题（详情）

  问题由不支持 flex-shrink、flex-basis 所致

国内安卓系统分布数据

根据数据，较老的安卓设备理应支持[老版本的 flexbox 语法]（通过 autoprefixer 添加）(http://www.w3.org/TR/2009/WD-css3-flexbox-20090723) ，但实测遇到了一些问题：

• 酷派 安卓 4.3 UC 10.8
• 酷派 安卓 4.3 微信 6.3.5
• https://github.com/amazeui/amazeui-touch/issues/2#issuecomment-147953053 小米4c 安卓5.1.1 下面

Flexbox 支持程度测试

• 酷派 安卓 4.3 UC 10.8: 全通过（有作弊嫌疑）
• 酷派 安卓 4.3 微信 6.3.5：最新版语法未通过

已经解决问题

3d6bbdc

测试环境：

• MI Note
• Android 6.0.1
• MIUI 7.2.7.0
• UC 浏览器 10.9.8.738

解决方式：

在安卓里 flex 里的子元素一定要是 block 元素，如果用行内元素 可以用flex-inline。(不过flex-inline兼容也不好，所以全改成块元素就好了)

解决问题：

• Accordion 图标显示问题
• Button-group 自适应样式宽度问题（同时修复 Tabs 标题栏的显示）
• List 中 form 列表包含 label 时，label 的宽度问题
• Checkbox/radio list 图标显示问题

[minwe]

原因可能是旧版规范中缺乏:

• flex-shrink
• flex-basis

两个属性。

所有 flex: x y z 声明转换为 -webkit-box-flex: 1;，导致没有按照预期工作。

box-flex: http://www.html5rocks.com/zh/tutorials/flexbox/quick/#toc-flexibility ，相当于 flex-grow 属性。

测试地址 http://jsbin.com/yorudagodo/edit?html,output

参考文章

• Using Flexbox: Mixing Old and New for the Best Browser Support

• https://dev.opera.com/articles/advanced-cross-browser-flexbox/

• http://dundalek.com/css3-flexbox-reference/

• http://stackoverflow.com/a/20874833/2340355

  box-flex is the old flexbox specification: you were allowed to specify one single "flexibility" value instead of the "growing", "shrinking" and "basis" factors values as you can do now

  NEW             OLD
  flex:1 1 auto; == box-flex:1;
  flex:1 0 auto; == no equivalent
  

  flex box may look really confusing because there are many specifications involved

  functioning is different between each spec, so it's better to define fallbacks in a later moment; especially if you use -grow -shrink -basis and -wrap etc, you will need to fallback to a totally different layout

[hurricanetx]

一只很看好 amaze 期待解决； 之前为也写过一个 http://www.chforce.com/appframe/uikit/uikit.html

[dzcms]

解决方案呢？

[dzcms]

总不能让我们都换手机吧

[icyflash]

微信里面要用 -webkit-box

[leakl]

其实跟flex 语法没什么关系 ，只要display:flex 再用autoprefixer编译一下就OK了，之所以有个问题，是安卓下flex 里有一个bug。

在安卓里 flex 里的子元素一定要是 block 元素，如果用行内元素 可以用flex-inline。(不过flex-inline兼容也不好，所以全改成块元素就好了) 我看了你的结构 ul>li.flex>a>h3 & span.icon a 和span都是行内元素 inline-block 也不行。 改成 ul>li.block>a.flex>h3 & span.block

[minwe]

@leakl 谢谢。回头试一下，这应该只能解决一部分问题。

[cdzwmlcl]

@minwe 这个问题解决了没？

[minwe]

@cdzwmlcl 没有完全的解决方案，下一步会尝试做一些改进，剩下的只能等待设备更新换代；也呼吁国内的安卓厂商不要乱改浏览器内核。

[MRFCY]

试试将-webkit-flex: 0 0 1; 和 flex: 0 0 1;等换成拆分的写法， 例如：-webkit-flex-grow: 0; -webkit-flex-shrink: 0; -webkit-flex-basis: 1; flex-grow: 0; flex-shrink: 0; flex-basis: 1;

[includeleec]

wechat的浏览器市场占有率也很大了！希望能专门针对该浏览器提供一个解决方案。

[minwe]

http://bbs.mb.qq.com/thread-1128359-1-1.html

Android 微信、QQ、QQ 空间 WebView 内核升级至 Blink M37，一些兼容问题可能已经解决，近期我们会进行相关测试。

腾讯相关 UA 功能支持列表：

http://res.imtt.qq.com/tbs/incoming20160419/home.html

经测试，以下 UA 已经升级到 Blink 内核：

• 魅蓝 Meta

  Mozilla/5.0 (Linux; Android 5.1; m1 metal Build/LMY47I) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.2 TBS/036215 Safari/537.36 MicroMessenger/6.3.16.49_r03ae324.780 NetType/WIFI Language/zh_CN

• 三星 Note 3

  Mozilla/5.0 (Linux; Android 5.0; SM-N9008V Build/LRX21V) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.2 TBS/036215 Safari/537.36 MicroMessenger/6.3.16.49_r03ae324.780 NetType/WIFI Language/zh_CN

[fangjj]

Mozilla/5.0 (Linux; U; Android 4.2.2; zh-cn; ZUOKU Build/JDQ39) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 这是我的android手机。会出现Flexbox 兼容性问题，我看到你后面的解决方法是。var ua = navigator.userAgent; if (/android/i.test(ua) && /ucbrowser/i.test(ua)) { document.documentElement.className += ' ua-stupid-uc'; }，只能在android uc中，我改成 if (/android/i.test(ua) && /ucbrowser/i.test(ua) || !/chrome/i.test(ua)) 有什么影响不。

[dd1994]

现在微信浏览器内核升级了基本没什么大问题了，现在还比较坑的就是 UC 吧

[minwe]

@dd1994 Android UC 已经测试过了，应该没什么大问题了。

[anjianshi]

Android 里 flex child 必须设置成 block 元素应该是老 flexbox 规范导致的。

在新规范里，每个 flex child （无论它是 inline、block 还是 inline-block）都会被转换成一个 block 元素。 见这里：http://stackoverflow.com/a/20378932/2815178

而在老规范里，多个连续的 inline 的 flex child 会被合并到一个匿名的 block 中。 2009 规范：https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#inlinesAndBlocks 2012 规范：https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flex-items （Android 4.3 及以下支持的是 2009 规范：http://caniuse.com/#search=flexbox ）

autoprefix 分别生成针对新老规范的规则时，没有处理这一情况。 于是在没有明确将 child 指定为 block 的情况下，在不同的浏览器里就会有不同的显示效果。

[minwe]

@anjianshi 嗯，这块已经作了处理，谢谢！

[littlepoolshark]

我一直是用微信内置的浏览器来测试我的webapp，直到有一天用uc浏览器打开才发现flex布局错乱。flex child改为block解决了部分问题，期待更多的关于flex布局兼容性的解决方案。