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

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

　　

　　在移動智能設備上用戶基本的操做就是滑動和觸摸，針對這兩個操做給出用戶及時的響應你的頁面就是成功的。可想而知，假設一個用戶的滑動在操做的過程當中忽然中止了，一次或許可以忍受，假設第二次、第三次反覆出現，我想這個用戶可能永遠都不會再訪問你這個頁面甚至整個站點，因爲一個及時的對應形成的損失是不可估算的。