移動前端開發人員必知必會：行動裝置概述

標籤：android   style   class   java   color   使用   

　　由於工作崗位的變換帶來工作內容的變動，對於移動網站的前端開發已經疏遠了好幾個月，在這好幾個月中有非常多新的東西出現，自己所掌握的一些東西也已經陳舊，所以選擇了這本書《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了。　　　　在移動智慧型裝置上使用者基本的操作就是滑動和觸摸，針對這兩個操作給出使用者及時的響應你的頁面就是成功的。可想而知，假設一個使用者的滑動在操作的過程中突然停止了，一次或許能夠忍受，假設第二次、第三次反覆出現，我想這個使用者可能永遠都不會再訪問你這個頁面甚至整個網站，由於一個及時的對應造成的損失是不可估算的。