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

   移动端的竞争愈演愈烈,大家的碎片时间更多地消耗在了手机和平板上,而非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预处理器的变量、运算、嵌套等特性可大大提高手动计算响应式的效率,妈妈再也不用担心我把比例算错了。当然后两者可参考需求及成本决定是否采用。

时间: 2024-09-13 11:39:28

你应该了解的“移动端兼容性”的相关文章

减少浏览器兼容性问题

做为一个前端工程师,不少时间都在处理浏览器兼容性问题.本文对如何减少浏览器兼容性问题的方法做了些总结. 确定运行环境 在开发前,我们要确定页面的运行环境:要兼容哪些浏览器,以及哪些屏幕分辨率. 如果我们不了解我们的运行环境,兼容性也无从谈起.也只有在确定来运行环境后,我们才可以选择合适的方式.我们可以借助 HTML5 与 CSS3 技术应用评估来选择用哪些技术. 查询特性的兼容性 在使用某个特性前,我们可以使用 Can I Use 来查询某特性在各个浏览器上的兼容性情况.也可以在代码中用 Mod

三步将 React Native 项目运行在 Web 浏览器上面

React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Native 的代码只兼容两个平台(iOS 和 Android),并没有兼容 Web 端访问.这里是因为 Facebook 开发人员认为 Web 端天生兼容性就巨麻烦,而且平台差异性是注定存在而且也要保留的,所以 React Native 的目标是 Learn once, write anywhere,而不

html5-求手机端图片上传组件

问题描述 求手机端图片上传组件 最近做了一个基于微信的移动端小项目,目前需要实现一个图片的上传功能,一共需要上传4张图片,目前html自带的文件域虽然可以实现,但四张图片同时提交恐怕会很慢,同时这样做图片上传也没有进度条效果,显得很单调,想在网上找一个上传组件,html5也好,不知道哪位大牛能够给我提供一个移动端兼容性最好的图片上传组件,代码最精简易懂,我后台是用PHP需要开发的,最好有一个完整的案例,我网上找了好多基本上没有看到满意的,求大神帮忙,这个问题困扰我好久了,知道的一定要给我回复,谢

以小见大,见微知著——亿万级APP架构演进之路

该文章来自阿里巴巴技术协会(ATA) 7月24日,2015WOT互联网开发者大会在富力万丽酒店隆重召开.阿里巴巴/高级无线技术专家徐昭(花名:长恭)带来的主题演讲<以小见大,见微知著 -- 亿万级APP架构演进之路>. 以下是演讲实录: 我是来自阿里巴巴无线事业部的徐昭,今天我演讲题目是以小见大,见微知著,和大家分享阿里巴巴以手机淘宝为代表的移动架构体系的演进过程和背后的思考,以及这其中大家最感兴趣的在大规模复杂应用场景下的关键架构技术. 手机淘宝是诞生于移动互联网时代的一个超级APP,并已成

移动网页设计9大原则——第1部分

[编者按]本文作者为来自 Mainstreethost 的站内营销专家 Kim Speier,主要介绍移动网页设计的九个原则,每个原则都配有生动的实例.文章系国内 ITOM 管理平台 OneAPM 编译呈现,以下为正文的第一部分. 如今,移动设备已占据优势地位,谷歌2015年发布的报告中显示,52%的搜索流量和几乎50%的购物流量来自移动设备.因此,具有移动端兼容性的网页设计已从奢谈变成了必需品.2015年4月"Mobilegeddon"转变了众人熟悉的市场营销模式,将适应性设计和移动

Pro JavaScript Techniques第一章: 现代javscript编程

 标题: Pro JavaScript Techniques第一章: 现代javscript编程 mozart0 [楼主] 匪徒田老大 版主 帖子 2326体力 6628 威望 177 注册 2003-6-18 #1 发表于 2007-4-4 10:46  资料  短消息  加为好友  Pro Javascript Techniques翻译连载:说明和目录 JavaScript的演化是渐进而稳固的.历经过去十年的进程,JavaScript在人们的认知里已经从一门简单的玩物式的语言逐渐发展成为一门

英特尔推出新处理器、网卡等新品,迎接5G时代

随着5G的来临,我们的社会正在进入一个全新的时代:从客户端到云端,数据计算将分布在整个网络的每个角落,提供更多个性化的沉浸式体验.为了迎接这种根本性的转变,通信服务供应商(CoSP)必须进行网络转型,以满足各种不同的传输速度.延迟.能耗和规模要求,从而将从无人驾驶汽车到可穿戴设备到智慧城市中的数十亿智能设备全部连接到一起. 这项转型中的关键一步是建造正确的基础设施,这就是为什么英特尔要推出新的专为5G网络准备的产品套件,其中包括新版英特尔凌动处理器C3000产品系列和英特尔至强处理器D-1500

诺西与四家终端设备商合作LTE互操作性测试

11月2日消息 继成功进行全球首次LTE呼叫和切换测试之后,诺基亚西门子近日又宣布与四家终端设备商合作进行端到端的LTE互操作性测试. 此次测试覆盖不同地区所需的多个频段,包括 AWS.700 MHz 和 2100 MHz.测试以Flexi Multiradio基站和分组核心演进(Evolved Packet Core)等商用LTE 硬件以及标准兼容软件为基础,对端到端网络进行多步配置. 测试展示了诺基亚西门子通信LTE无线网络产品.Flexi NS.Flexi NG分组核心演进网元与真实LTE

IOT 赋能旅行场景的实践与展望

2017杭州云栖大会移动技术实践专场上,飞猪旅行无线技术工程师拔赤带来IOT在旅行场景方面的实践演讲.本文主要从IOT场景化革命开始谈起,接着说及阿里云端 IOT 基础设施,着重说明了IOT在旅行行业的挑战以及应对挑战所做的实践,具体分享了自助入住&全屋智能技术和智能门锁原型设计实现,最后对未来进行了展望. 以下是精彩视频内容整理: 旅行场景是典型的O2O场景,线上定好行程,旅行过程当中有很多场景可以和当事人发生很多互动,除了定制旅行产品之外,在旅行过程当中还有很多好玩的东西等待我们发掘. IO