常用手机uc浏览器兼容问题记录（陆续补充）

移动端的uc和微信被认定为手机端的ie6，从flex出世以来，移动端的布局使用flex真的是得心应手，各种布局问题得以简化，但是uc浏览器实在是业界一大毒瘤，不得不特别关照，下面列一下我再工作中遇到过的手机uc兼容性问题，做个归纳整理。
1. uc浏览器可以识别空格
数据中如果加入了空格浏览器是不会自动过滤的，在自己的手机浏览器不会有这个问题，不过平时注意一下后台的数据处理的话，就不会产生什么影响

如：

<sapn>    123123    </span>

在uc上就会显示前后有占位的空白，其他浏览器则不会
2.内联元素的margin-top 和 margin-bottom无效；
如果想实现上下外边距效果，记得换成block或者inline-block,
貌似h标签的上层没有内容的话，margin-top也会失效，可以在外层使用padding-top;

3. 关于flex
*：使用代码补全工具autoprefixer，或者别的，取决于你所用的前端开发框架，有了代码补全后就简单了
a.如果在flex布局过程中发现uc页面有蹦掉的地方，先检查一下，flex内的子元素是不是display：bloc或者inline-block，如果是内联元素在uc下会导致flex布局失效

b.不支持justify-content : space-around；
如果想实现space-around效果使用space-between和padding结合来使用

justify-content: space-between;
padding: 0 10px;

c.不支持flex-wrap属性
想自动换行的话还是用float吧。。。

如果你没用代码自动补全工具的话，下面是flex兼容的部分代码（以less的形式）：

.flex{
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex(@num){
  -webkit-box-flex: @num;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: @num;         /* OLD - Firefox 19- */
  -webkit-flex: @num;          /* Chrome */
  -ms-flex: @num;              /* IE 10 */
  flex: @num;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.spacebetween{
  -webkit-box-pack:justify;
  -webkit-justify-content:space-between;
  -moz-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
}
.f-wrap{
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
    flex-wrap:wrap;
}
.f-column{
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -moz-box-orient:vertical;
  -moz-box-direction:normal;
  flex-direction:column;
  -webkit-flex-direction:column;
}
.a-center{
  -webkit-box-align:center;
  -webkit-align-items:center;
  -moz-box-align:center;
  -ms-flex-align:center;
  align-items:center
}

4. 点击屏幕或者选取select框后字体突然变大
UC在识别到页面文字很多的情况下会自动放大字体，来优化阅读体验，
但是我们平时设定好的字体不需要突然变动，
关闭这个功能需要在网页头部添加：

<meta name="wap-font-scale" content="no">

---

持续补充。。。