移動Web開發實踐

標籤：sig   比例   initial   補充   evel   idt   load   螢幕   大小   

行動裝置的高速發展給使用者帶來了非常大的便利。使用者使用Android、iPhone和其他行動裝置非常easy接入互連網。

行動裝置對網頁的效能要求比較高。以下就說說Mobile Web開發的一些心得。

Viewport

當你用iPhone訪問一個沒有面向行動裝置最佳化過的網站時(最好選取960px寬度的網站)。你會發現iPhone上面剛好能夠把整個頁面顯示出來，可是頁面被縮小了許多。字型很小。這其實是Sarari預設把自己當成980px寬度來處理的，而全部iPhone(豎屏)的真實寬度為320px，其實差點兒全部的行動裝置都有類似的情況，iPhone的請參考iPhone 5 Display Size and Web Design Tips。這就牽扯到Viewport的概念了。

Viewport是瀏覽器的可視地區，也是瀏覽器的寬度，在PC上面問題比較簡單，寬度是多少就多少。可是在行動裝置上，瀏覽器嘗試去把整個頁面都顯示出來，所以就會Viewport值不準確的情況。比如上面提到的Safari從iPhone那裡擷取到寬度是980px(瀏覽器僅僅能從系統那裡擷取寬度)。所以我們要做第一件事就是要瀏覽器用真實的寬度去解析頁面，代碼例如以下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

"width=device-width"表示瀏覽器用它自己真實的寬度，如iPhone上面就是320px，initial-scale=1.0表示預設不進行縮放。

關於Viewport很多其它請參考：Using the viewport meta tag to control layout on mobile browsers

補充一下：裝置像素不等於CSS像素，比如使用者放大頁面300%。CSS像素也跟著放大300%，但裝置像素肯定不會有變化。非常多裝置為了保證良好瀏覽效果，一般會告訴瀏覽器一個假的解析度，比如iPhone5s的裝置解析度是640x1136，可是卻告訴瀏覽器它的解析度是320x568(網站要加width=device-width，否則是980寬度)，否則真的以640x1136在那點螢幕上進行瀏覽頁面肯定要近視了。

響應式設計

行動裝置的解析度多種多樣。這就要求我們要在全部裝置上都能非常好的展示。而響應式設計就是非常好的解決方式。BootStrap等架構都號稱移動優先，當然缺點是檔案比較大，假設網站比較簡單的話能夠自己用百分比寫寫就能夠了。很多其它響應式設計請參考：響應式設計介紹

圖片精度

如今新的手機配置都比較高，絕大部分手機的像素比例（devicePixeRatio）都超過1，iPhone的Retina螢幕的像素比例為2，Nexus5的像素比例為3。

像素比例高的螢幕必需要有高清的圖片，這樣顯示效果才好，比方iPhone5s的豎屏寬度為320px，可是僅僅有使用640px寬度的圖片才幹完美顯示。

我們的開發經驗是圖片以iPhone5s為標準進行處理，就是在iPhone5s上面必須是高清顯示，其他廣大Anroid裝置上自適應處理。

能夠參考：移動Web——CSS為Retina螢幕替換圖片

效能相關

• Zepto.js

  jQuery很強大。可是它的體積比較大。即使是2.x的壓縮版也有82KB。

  ZeptoJS號稱迷你版jQuery，相容大部分的jQuery API。它的大小僅僅有24KB，由於它僅僅支援行動瀏覽器，全部體積小，速度快。

• Lazy load

  對於移動網頁來說。真正消耗流量部分應該是圖片部分。由於圖片通常都比較大，所以我們能夠使用Lazy Load的方式僅僅載入當前螢幕中的圖片。由於使用者非常多時候僅僅是看一下當前螢幕的內容就跳到下一頁了。沒有必要一次把全部圖片都載入進來。

• 其他

  為了提高效能和降低下載流量，我們能夠壓縮合并CSS，JS檔案，對圖片進行壓縮處理，對表徵圖進行合并等。

HTML5 & CSS3

行動裝置上的瀏覽器都是比較新的瀏覽器，基本上都支援HMTL5和CSS3的新的功能。因此我們應該多使用它們。最起碼我們能夠使用CSS3的圓角效果來替換圖片。以下列出一些很有用的CSS3特性。

• rem

  CSS經常使用px, pt作為字型單位。可是它們的缺點是它們是絕對值。百分比(%)和em作為字型單位時大小，它們的值是由它們的父元素的字型大小決定的，優點是它的值是動態變化的。缺點是由於每一個元素的父元素的字型大小都不一樣，因此各個em的大小也不一樣。終於導致統一設定字型大小。

  而rem相對於百分比和em來說。它是相對於root 元素的字型大小而不是父元素，這樣不論什麼一個元素使用rem作為單位時它的參考單位都是一樣的。

  這樣我們就統一控制整個頁面的字型大小了。

  請參考：CSS3的REM設定字型大小

• 動畫

  我們通經常使用JS來實現動畫，比方jQuery的animation()，可是JS的效能比較原生的CSS3動畫要差非常多。所以能用CSS3實現的動畫就用CSS3實現。

參考文檔

• 響應式設計介紹
• CSS3的REM設定字型大小
• CSS3的REM設定字型大小

移動Web開發實踐