常用手机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">

持续补充。。。