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

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

 

移动页面对灵敏性的要求

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

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

　　

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