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

本文主要是介绍常用手机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">

---

持续补充。。。

这篇关于常用手机uc浏览器兼容问题记录（陆续补充）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---