移動前端開發人員必知必會：移動設備概述

　　由於工做崗位的變換帶來工做內容的變更，對於移動網站的前端開發已經疏遠了好幾個月，在這好幾個月中有不少新的東西出現，本身所掌握的一些東西也已經陳舊，因此選擇了這本書《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了。

　　

　　在移動智能設備上用戶主要的操做就是滑動和觸摸，針對這兩個操做給出用戶及時的響應你的頁面就是成功的。可想而知，若是一個用戶的滑動在操做的過程當中忽然中止了，一次也許能夠忍受，若是第二次、第三次重複出現，我想這個用戶可能永遠都不會再訪問你這個頁面甚至整個網站，由於一個及時的相應形成的損失是不可估算的。