移動Web開發實踐
移動設備的快速發展給用戶帶來了很大的便利。用戶使用Android、iPhone和其它移動設備很容易接入互聯網。移動設備對網頁的性能要求比較高，下面就說說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實現。