（本文只針對Android、Ios、WP三種流行的智能機系統）
最近由於項目需要，着手移動設備的web開發。在此之前從未做過mobile web開發的我也考慮到與PC web開發考慮的因素將會有所不同。
PC web開發要考慮瀏覽器兼容：IE6,7,8,9、Chrome、Firefox、Opera、Safari（也就這幾款瀏覽器），除了IE以外，其余瀏覽器只需要兼容最新版即可，基本上無需考慮系統平台。
Mobile web開發要考慮的可不像PC web那樣簡單明了，下面將說說我在做mobile web開發的時候遇到的問題以及解決辦法：
1、關於頁面尺寸，先說一下PC web的兩種布局，一般的網頁如果用固定布局都會定義好整個頁面的寬度，常見的寬度是980px，當屏幕分辨率的寬度大於980px的時候，如：1024*768，頁面就居中，兩邊留白；如果屏幕分辨率小於980px的時候，如：800*600，頁面就會出現橫向的滾動條，這應該是所有前端開發人員都不希望出現的，所幸的是目前大多數顯示器的屏幕分辨率都是1024*768以上的，所以寬度為980px的固定布局是安全又放心的。而如果用流動布局做網頁的話一般要自應適不同的分辨率滿屏顯示以讓內容區域達到最大化，流動布局的例子有很多，如郵箱、博客園等等。
接下來說說手機上打開一個PC web頁面，用手機打開一個寬度為980的固定布局頁面，頁面會默認縮放到剛好滿屏顯示，並不會出現橫向滾動條，這個現象並不讓我感到奇怪，我認為這是手機廠商的一些設定造成的，但關鍵是做了什么“手腳”，后來網上查閱了很多資料知道這是因為瀏覽器的兩個viewport：
簡單的說就是頁面本身有一個viewport——layout viewport，以及手機瀏覽器有一個viewport——visual viewport，手機瀏覽器將自己模仿成一個與layout viewport同樣寬度的屏幕，令layout viewport=visual viewport，讓本來只有320px寬的屏“變身成”980像素寬的屏。
面對固定布局的頁面尚且如此，但流動布局又如何，手機瀏覽器會模擬成一個多寬的屏幕呢，原來不同的系統及瀏覽器有不同的值：
Opera Mobile 是 850px，iPhone Safari 是 980px，Android 是 800px，Windows Phone 7 是 1024px。
雖然在手機瀏覽器上頁面會自適應屏幕大小，但仍然不滿足需求，為什么？因為被縮放的頁面就連文字也一並縮放了，基本上是無法看清文字，文字太小了。雖然可以手動放大頁面，但又會出現橫向滾動條，無論如何體驗也不佳。
於是，Apple發明了一個標簽：<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">。這個標簽用於定義頁面的layout viewport。
width=320表示頁面的layout寬度，說得白一點就是手機瀏覽器里滿屏顯示的將會是頁面中間部份的320寬的區域。
initial-scale=1.0是頁面初始的縮放比例，1.0則是不縮放。
minumum-scale=1.0是頁面可以縮放的最小比例。
maximum-scale=1.0是頁面可以縮放的最大比例。
（其實還有一個參數：userscalable = no/yes，是否允許用戶縮放頁面，不過我就不加了。）
接下來有個問題就是width=320，如果是這樣設定那么在不同尺寸的手機里都只是顯示頁面的320區域，這也是我不希望的，所幸的是width參數不只設定固定的數值，還可以設定為：width=device-width，layout寬度定義為設備的寬度。理論上如果手機屏幕的寬度為640的話，width=device-width的設定將會使頁面的layout寬度為640才對，但事實並不一定是如此。眾所周知iphone 4s的分辨率是640*960，經我測試在豎屏情況下，也只是顯示了頁面的320px的layout寬度，這個事實把以上的理論完全打破了，后來找到找到了msdn上的一篇博客：The IE Mobile Viewport on Windows Phone 7，其中一段這樣寫：
這里的意思大概就是Windows Phone 7的設備寬度是480寬，但當設定width=device-width的時候，實際上只有320的layout寬度。這是因為微軟做了大量的實際調查后發現絕大多數的網站設定width=device-width都是為了適應320的layout寬度。於是微軟決定用320的寬度作為device-width。至於Iphone 和 Android 我也測了一下發現都有類似的情況，這可能是英雄所見略同吧。可是我的4.3寸的HTC G17測試是顯示的可不只有320的layout寬度，但無傷大雅，內容區域更寬了體驗也更好，這也許不同版本的系統還是會有差別的。縱然如此，width=device-width存在的風險還是很低的。我最終決定viewport用：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">。
2、Mobile web 開發是用固定布局還是選用流動布局？我個人選用流動布局，這樣無論是豎屏還是橫屏都可以滿屏顯示，而且目前很多手機站點都是用流動布局。
3、設計頁面UI的時候就應該用320的寬度，事實上如果設計的時候UI寬度大於320，存在的風險之一就是如果里面用到的圖片元素寬度大於320，在輸出頁面的時候圖片就會顯示不完整被截斷或者你需要縮小圖片才可以完全顯示，所以我覺得設計頁面UI應該用320的寬度，但輸出網頁的時候就用流動布局。
4、關於頁面的縮放，即使我的viewport已經設定了initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0，但不同的瀏覽器里還是有不同的表現，Android下UC瀏覽器里面不能縮放（屬於情理之中了），但系統自帶的瀏覽器卻仍然可以放大（有點意料之外），不過也無傷大雅，個人認為影響不大。
5、關於CSS，目前手機似乎對部份CSS屬性並不支持，我嘗試用position:fixed把導航固定在頂部，卻做不到，原來目前的手機瀏覽器並不能很好的支持position:fixed，后來找到了ISCROLL，可以模擬這個缺失的功能，但並不完美，滾動的時候並不像原生的那樣流暢，而且存在着高風險，在Android系統下測了幾款流覽器基本上沒大問題，但WP7的IE下就掉鏈子了，整個頁面都變得無法滾動，看來兼容性還不是很好。
6、關於字體大小，個人手機瀏覽器里正文的字體用16px-18px大小較為合適。
7、關於測試頁面兼容性，文章開頭所列舉的瀏覽器也就8種，PC web兼容性測試情況也就只有這8種。可是Mobile web的兼容性測試卻並不這么簡單，如果要數，估計得有至少20種，即使同一款瀏覽器，不同的系統里面還是有所不同。在此直接分享一篇騰訊MXD的手機網站重構經驗分享，寫得相當詳細，有興趣的同學可以參照一下。
最后，寫一下個人的感言：所擁有的技術只是現在，學習能力才是將來，即便是菜鳥，三五年后也會趕超你曾認識的大牛，只要有信心學好。