移動裝置的快速發展給使用者帶來了很大的便利。使用者使用android、iphone和其它移動裝置很容易接入網際網路。移動裝置對網頁的效能要求比較高，下面就說說mobile web開發的一些心得。
當你用iphone訪問乙個沒有面向移動裝置優化過的**時(最好選取960px寬度的**)，你會發現iphone上面剛好可以把整個頁面顯示出來，但是頁面被縮小了非常多，字型非常小。這其實是sarari預設把自己當成980px寬度來處理的，而所有iphone(豎屏)的真實寬度為320px，事實上幾乎所有的移動裝置都有類似的情況，iphone的請參考iphone
5 display size and web design tips。這就牽扯到viewport的概念了。
viewport是瀏覽器的可視區域，也是瀏覽器的寬度，在pc上面問題比較簡單，寬度是多少就多少，但是在移動裝置上，瀏覽器嘗試去把整個頁面都顯示出來，所以就會viewport值不準確的情況，例如上面提到的safari從iphone那裡獲取到寬度是980px(瀏覽器只能從系統那裡獲取寬度)，所以我們要做第一件事就是要瀏覽器用真實的寬度去解析頁面，**如下：
"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螢幕替換
jquery非常強大，但是它的體積比較大，即使是2.x的壓縮版也有82kb。zeptojs號稱迷你版jquery，相容大部分的jquery api，它的大小只有24kb，因為它只支援移動瀏覽器，所有體積小，速度快。
對於移動網頁來說，真正消耗流量部分應該是部分，因為通常都比較大，所以我們可以使用lazy load的方式只載入當前螢幕中的，因為使用者很多時候只是看一下當前螢幕的內容就跳到下一頁了，沒有必要一次把所有都載入進來。
其它為了提高效能和減少**流量，我們可以壓縮合併css，js檔案，對進行壓縮處理，對圖示進行合併等。
移動裝置上的瀏覽器都是比較新的瀏覽器，基本上都支援hmtl5和css3的新的功能，因此我們應該多使用它們。最起碼我們可以使用css3的圓角效果來替換。下面列出一些非常實用的css3特性。
css常用px, pt作為字型單位，但是它們的缺點是它們是絕對值，百分比(%)和em作為字型單位時大小，它們的值是由它們的父元素的字型大小決定的，好處是它的值是動態變化的，缺點是因為每個元素的父元素的字型大小都不一樣，因此各個em的大小也不一樣，最終導致統一設定字型大小。
而rem相對於百分比和em來說，它是相對於root 元素的字型大小而不是父元素，這樣任何乙個元素使用rem作為單位時它的參考單位都是一樣的。這樣我們就統一控制整個頁面的字型大小了。
請參考：css3的rem設定字型大小
我們通常用js來實現動畫，比如jquery的animation()，但是js的效能比較原生的css3動畫要差很多，所以能用css3實現的動畫就用css3實現。
響應式設計介紹css3的rem設定字型大小css3的rem設定字型大小
移動web開發
1.為什麼去學習移動web？已經從趨勢變成了乙個主流了，網際網路的流量入口已經大於pc端的流量入口2.相容性在國內的移動web瀏覽器，絕大部分都是基於webkit核心的，所以一些css3效果，h5的新特性絕大部分都被支援，需要新增字首。不同機型之間可能會略有不同，這個需要踩坑 在移動端，做動畫一律用...
移動web開發1
學習了viewport視口及相應的屬性 viewport 視口屬性 該屬性只在移動端瀏覽器上才有用。name viewport 告訴瀏覽器 我這個meta標籤設定的是viewport屬性 content設定的是屬性的值 屬性名不能亂寫 有固定的取值 width 寬度 device width 裝置的...
移動端web開發
viewport content width device width,user scalable no,initial scale 1.0,maximum scale 1.0,minimum scale 1.0 width 設定視口寬度 initial scale 初始化縮放比，大於0的數字 ma...