移动前端开发人员必知必会：移动设备概述

　　由于工做岗位的变换带来工做内容的变更，对于移动网站的前端开发已经疏远了好几个月，在这好几个月中有不少新的东西出现，本身所掌握的一些东西也已经陈旧，因此选择了这本书《HTML5触摸界面设计与开发》来系统地学习和整理一下关于移动网站前端开发的知识体系。

　　之因此选择这本书，一是由于这本书比较新，2014年04月发的初版。其二是由于做者Stephen Woods，这是Flickr团队的资深前端，Yahoo主页的Javascript技术平台正是出自此人之手。

　　接下来的时间里会陆续上传关于这本书学习的一些知识点总结和梳理的心得体会。

 

移动和PC的差别

　　PC前端最担忧的是页面可否兼容各类浏览器→很大一部分的工做是理解各类浏览器之间的差别，解决浏览器的兼容性问题。 移动前端的问题不在各类浏览器的差别，而在于不一样的设备差别。

• 设备的尺寸不一样：

　　　　 移动设备的尺寸比PC要小的多，并且没有鼠标，也没有习惯使用的键盘。

　　　　移动设备主要有：手机和平板（小型：7寸左右的屏幕，如Nexus 七、Galaxy Note、ipad mini；大型：ipad和10寸的Android平板）。

　　　　移动设备上的浏览器都是全屏浏览，惟一可经过旋转移动设备在横屏和竖屏之间切换的方法来调整浏览器的大小。因此，移动设备开发的网页就有了针对不一样设备尺寸进行优化的需求，这就是响应式Web设计（这里不对响应式Web设计的概念进行介绍，以前的博客有对响应式Web设计作过详细的介绍）。

 

• 设备的计算能力不一样：

　　　　 硬件性能是移动设备和PC设备相比最大的致命弱点，不过，近期发布的移动设备都拥有了独立的CPU，性能上比早期的移动设备要好不少。

 

• 用户的使用习惯不一样：

　　　　PC设备的使用场景比较单一化，可是移动设备确实利用了用户的时间碎片，排队、坐车、会议、甚至是上厕所。因为是时间碎片，因此移动网页的浏览对速度和性能的要求要比PC网页的要求要高的多。设想，你在上厕所，没打开一个移动网页须要10S左右的时间，我估计用户连大解都会受到影响。

 

• 界面操做方式不一样：

　　　　PC经过鼠标点击和键盘输入来完成网页的浏览。可是移动设备是经过触摸界面来完成这些操做。

 

移动设备介绍

　　先来了解一下不一样维度下移动设备的分类：

• 分类依据一：操做系统

　　　　移动设备的主流操做系统有：ios、blackberry os、android、windows 8，其中android已是目前最流行的移动设备操做系统。

• 分类依据二：设备尺寸

　　　　根据设备尺寸的不一样，移动设备主要有两种：手机和平板。

• 分类依据三：浏览器

　　　　Webkit是如今占额最高也是最流行的移动浏览器的内核。全部ios、android和blackberry的默认浏览器都是使用Webkit内核。

 

HTML5

　　HTML5已经不是一个具体的代码名称和编程风格了，而是一个功能统称和一个规范标准。全部移动浏览器共有的，为支持先进浏览器而存在的功能统称为HTML5。因为WHATWG（网页超文本技术工做小组）并无给出官方规范的标准，正由于HTML5是一个动态的标准，因此各个浏览器对其支持性存在必定的差别，所以开发人员在开发的过程当中要学会注意这些差别化。

　　HTML5的动态标准规范在：www.whatwg.org，完整的W3C官方规范在：w3.org。

 

移动页面对灵敏性的要求

　　触摸的界面给人的感受是天然、流畅，若是一个移动页面打开很慢，操做很卡，这给用户的感受会很不爽。那究竟什么样子的移动网页能够给用户很爽，很舒服的感受呢？

　　本来我也觉得从页面性能，服务器响应速度等多个方面来提高页面打开的速度，可是实际操做的时候这些都不会尽如人意。这本书中提出的一个观念让我眼前一亮，原来咱们移动网页的性能审查标准不是单独的响应时间为参考维度的。而这本书的做者认为：页面只要让人“感受”快，而不是真的快就能够的。因此“感受”快，就是及时响应用户操做，让用户知道他的操做咱们有反应了，而且能迅速给出反应的结果就OK了。

　　

　　在移动智能设备上用户主要的操做就是滑动和触摸，针对这两个操做给出用户及时的响应你的页面就是成功的。可想而知，若是一个用户的滑动在操做的过程当中忽然中止了，一次也许能够忍受，若是第二次、第三次重复出现，我想这个用户可能永远都不会再访问你这个页面甚至整个网站，由于一个及时的相应形成的损失是不可估算的。