前端移動頁面開發螢幕適配

除錯工具chrome：

除錯工具用chrome我覺得就可以了，直接開發者工具轉到手機除錯頁面，chrome不僅可以模擬隨意縮放手機頁面寬度和高度，還可以選擇iphong等各種手機型號來模擬。

不過chrome預設中文最小的字型大小是12px，當小於12的時候都會以12px來顯示，這就導致當螢幕寬度調整到384以下的時候，螢幕上還是以12px來顯示。

網上一般解決的辦法是在body裡面加上-webkit-text-size-adjust:none;或者-webkit-text-size-adjust:100%;呼叫核心解決這個問題。不過chrome在27.0版本以前支援這個屬性，但是在以後的版本就不支援了。

這個其實也不算chrome的bug，因為畢竟漢字不比英文，很小的時候就看不太清楚。要解決這個問題很簡單，就只需要在chrome裡面設定最小字型大小就行了：設定-高階設定-最小字型大小。將最小字型大小調整到10px就行了，這樣能適應的最小螢幕寬度是320(一般小於320的螢幕不需要考慮)。

另乙個問題就是有時候你會在**裡面加入overflow：scroll；這時候在手機上滑動頁面的時候就不太流暢。可以在body加上-webkit-overflow-scrolling:touch;呼叫硬體記憶體可以使滑動頁面流暢，不過需要消耗更多的資源。

使用rem作為單位寫頁面：

rem是相對於html根元素的單位，即1rem=html根元素的font-size值。用rem作為頁面的寬高單位就可以根據螢幕寬度的變化來及時適應。

根據螢幕寬度來調整html根元素的font-size（即rem）需要一段js**：

(function (doc, win) ;

if (!doc.addeventlistener) return;

win.addeventlistener(resizeevt, recalc, false);

doc.addeventlistener('domcontentloaded', recalc, false);

})(document, window);

在除錯工具上除錯好後要在手機上試一試，畢竟真實環境和除錯的不一樣。兩者是一定會有差異的，這樣的差異不可避免。

在寫移動頁面的時候要嚴格要求自己，畢竟手機頁面就那麼大，一定要每1px都要不能差。盡量做到完美才能有所進步。