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

　　由于工作岗位的变换带来工作内容的变动，对于移动站点的前端开发已经疏远了好几个月，在这好几个月中有非常多新的东西出现，自己所掌握的一些东西也已经陈旧，所以选择了这本书《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。

 

移动页面对灵敏性的要求

　　触摸的界面给人的感觉是自然、流畅，假设一个移动页面打开非常慢，操作非常卡，这给用户的感觉会非常不爽。那到底什么样子的移动网页能够给用户非常爽，非常舒服的感觉呢？

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

　　

　　在移动智能设备上用户基本的操作就是滑动和触摸，针对这两个操作给出用户及时的响应你的页面就是成功的。可想而知，假设一个用户的滑动在操作的过程中突然停止了，一次或许能够忍受，假设第二次、第三次反复出现，我想这个用户可能永远都不会再訪问你这个页面甚至整个站点，由于一个及时的对应造成的损失是不可估算的。