你应该了解的“移动端兼容性”

 　　移动端的竞争愈演愈烈，大家的碎片时间更多地消耗在了手机和平板上，而非PC。开发者在不同平台不同终端之间来回周旋，如何把控兼容性就成了一个非常重要的课题。接下来，看看畅游VC是如何分析和看待移动端兼容性的~

　　移动网民的规模将在2013年底达到5.0亿，增速为19.1%。预计到2017年，移动网民将赶超PC网民，成为互联网的第一大用户群体，移动端将成为网民最主要的上网渠道。互联网的加速渗透和全民移动互联有望在下一个5年实现。在过去的几年时间里，移动智能设备快速普及，配置迅速提升，许多过去在PC端才能完成的需求都转移到了移动端，导致PC端流量也逐渐向移动端转移。未来几年许多互联网产品移动端的流量即将超过PC端，整个互联网的使用场景产生巨大变迁。

　　——《2014年中国移动互联网行业年度研究报告》

　　来自艾瑞的《2014年中国移动互联网行业年度研究报告》向我们展示着在未来的互联网世界，移动端将成为主要战场，若想在浪潮汹涌中屹立不倒，我们就要开始移动端，开始一个新的征程。

　　作为一名前端工程师，我们享受过或仍在享受着pc端各种”非现代”浏览器的”折磨”，面对移动端我们又将面临哪些兼容性的考验呢?篇幅所限本文将向各位展示我们在移动端开发过程中针对兼容性问题的一点经验，主要包括方案选型及入门基础，如果您是大牛、大神或是大神牛欢迎指点、指正，如果您是和我一样的移动端新鸟欢迎探讨共同学习。

　　在移动端的兼容性上主要需要关注哪些方面的问题，对其又是如何定级的呢。由于要考虑设备(pc设备or移动设备)、厂商、机型、操作系统及版本、浏览器及版本等多方面因素，移动端兼容性被毫不夸张得称为”后IE6时代”。如何在成本允许的情况下将页面更好地呈现给用户，让我们先来看一组数据：

　　由图可见，智能手机占据了常用移动设备终端95.2%的份额，而智能手机中安卓及IOS两大平台占比总和达到了89%，综合成本、效率及整体效果考虑，我们暂且将移动端浏览器的兼容性定级为：兼容IOS和安卓平台的主流机型、系统及浏览器。

　　目前针对跨终端的方案，主要分为两大阵营：一套资源Vs两套资源。第一种是通过响应式或页面终端判断去实现一套资源适配所有终端;第二种是通过终端判断分别调取两套资源以适配所有终端。这两种思路我们并不能斩钉截铁的说哪一个更优选，正所谓”合适的才是最好的”。下面来对这两种思路进行简单的对比：

　　思路一:通过响应式或页面终端判断去实现一套资源适配所有终端

　　优势：只需维护一套资源，维护成本较低。

　　劣势：需加载适配各个终端的各个资源，在不同终端通过响应式布局实现不同展现，部分交互效果需要在页面中做终端判断，代价较大，若图片资源为一套，部分图片在超高分辨率设备(例如iphone系列)下会失真，且在非wifi情况下即使加了延时加载也易出现加载慢的情况。

　　技术选型：jquery(或原生js等)+ 响应式 + 前端模块加载器(seajs或RequireJS等)+ css预处理器(sass 或less等)。jquery较好的兼容性配合响应式可相对代价较小地实现跨终端。前端模块加载器主要负责按需加载，以提高页面加载速度，css预处理器的变量、运算、嵌套等特性可大大提高手动计算响应式的效率，妈妈再也不用担心我把比例算错了。当然后两者可参考需求及成本决定是否采用。