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

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

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

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

 

移动和PC的差异

　　PC前端最担心的是页面能否兼容各种浏览器→很大一部分的工作是理解各种浏览器之间的差异，解决浏览器的兼容性问题。 移动前端的问题不在各种浏览器的差异，而在于不同的设备差异。

• 设备的尺寸不同：

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

　　　　移动设备主要有：手机和平板（小型：7寸左右的屏幕，如Nexus 7、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了。

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