1. 引言
原文：Sitepoint的5 Responsive Design Pitfalls and How to Avoid Them
譯言：希望能夠對大家所有幫助。
2. 正文
2.1 引入
想象這樣的場景： 您剛剛建立了一個傑出的響應式設計，然後準備在移動裝置中測試一下。在您意想不到的地方產生了一些問題，文字亂糟糟的，動畫波濤洶湧，表單沒有呈現您設計的樣式。然後花費N多時間修復這些問題，您可能抓狂地把電腦扔出窗外砸中鄰居家的貓。
好訊息是，我準備在本篇文章裡介紹這些可能令您抓狂的問題，並講解相應的解決方案。主要包括以下五個問題：
- 意外的文字改變
- 非期望的表單樣式
- 誤導的模擬器錯誤
- 桌面端表現良好動畫的移動端呈現問題
- 觸控事件(Touch Event)的座標註冊問題
好的，言歸正傳。
本文假設您瞭解響應式網頁開發的基礎知識，否則您可能需要進行一下提升(簡明教程)。
2.1 意外的文字改變
ios裝置的旋轉將破壞佈局、改變頁面中的文字大小，當元素（例如導航條、選單等）設定為固定定位時經常產生類似的問題，只有重新整理頁面才可以修復問題。幸運的是，有一個方法可以防患於未然。
在您的css中新增如下程式碼
|
1 2 3 4 |
html { /* 防止橫屏時的文字縮放 */ -webkit-text-size-adjust: 100%; } |
該程式碼設定橫屏時文字的縮放為100%，從而防止意外的文字改變發生。
2.2 非期望的表單樣式
平板或移動裝置經常呼叫預設樣式搞糟您的表單樣式，我們可以使用如下的css程式碼阻止表單的預設樣式。
|
1 2 3 4 5 |
input[type=text], button, select, textarea{ -webkit-appearance: none; -moz-appearance: none; border-radius: 0px; } |
您可以根據需要選擇重置的表單，例如將 input[type=text] 改變為 input 會選擇所有型別的input。
2.3 誤導的模擬器錯誤(mulator Errors)
如果您使用基於瀏覽器的移動模擬器進行測試，有時會產生一些煩人的問題。在您程式碼沒有問題的情況下丟擲一個問題，令人糾結。
例如，有一次正在開發中的頁面底部的導航條莫名其妙的消失了，正當我準備查詢問題原因時，我發現Chrome模擬器的視窗底部被切掉一部分，當我在新tab中開啟頁面，然後切換移動檢視重新整理之後就解決了問題。
遇到類似的問題，最為重要的是，要保證您的程式碼沒問題僅僅是模擬器的問題。您可以嘗試隔離問題區域看看程式碼是否正常工作，然後在真正的移動裝置上測試一下。
2.4 桌面端表現良好動畫的移動端呈現問題
如果您在移動裝置上使用動畫，請一定要尤其注意動畫的效能問題。一般來說，瀏覽器能夠有效的動畫以下屬性translate、scale、rotate和 opacity等，例如下面的案例。
|
1 2 3 4 |
transform: translate(15px, 40px); /* shift left 15px and down 40px */ transform: scale(2); /* scale to 2 times original size */ transform: rotate(30deg); /* rotate 30 degrees */ opacity: 0.5; /* set opacity at 0.5 */ |
這些屬性動畫效能良好的原因是，這些屬性位於瀏覽器渲染器的頂層。您可以把一個網頁看成一個餐桌，動畫這些屬性就類似於移動一個調羹，動畫底層屬性類似於移動整個餐桌布，您需要同時移動上面的所有覆蓋物，所以更加費勁一些（效能就會差一點）。
您可以通過閱讀這篇文章，瞭解動畫效能的更多資訊。
為了最大化的支援您的動畫，您可能需要加瀏覽器字首(verdor prefix)，您也可以到Caniuse瞭解更多的相容情況。
另外注意，盒陰影(box-shadow)有時會影響動畫效能，所以強烈建議使用盒陰影時注意移動裝置的測試。
2.5 觸控事件(Touch Event)的座標註冊問題
觸控事件的座標註冊問題也比較微妙，因為座標在不同裝置中儲存區域不同。一些裝置(例如ios)的觸控座標和單擊座標相同，而另一些（例如android）裝置則不同。好訊息是，在任何移動裝置中都可以通過特定的觸控事件資料（touch event data）獲取座標。
對於觸控事件來說，使用e.touches[0].pageX而非e.pageX獲取觸控點的x座標，獲取y座標也是類似的道理。下面是一些可能實際應用的程式碼。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* event */ document.onclick = function(e){ var x = e.pageX; // get x coordinate of click var y = e.pageY; // get y coordinate of click console.log('x = ' + x + ', y = ' + y); // show coordinates in console } /* for touch event */ document.ontouchstart = function(e){ var x = e.touches[0].pageX; // get x coordinate of touch var y = e.touches[0].pageY; // get y coordinate of touch console.log('x = ' + x + ', y = ' + y); // show coordinates in console } |
大家不妨模擬器裡測試下上面的程式碼。
2.6 總結
本文羅列一些響應式網頁開發中的一些常見陷阱，並指定了對應的解決方案，希望可以對您為您節省時間，少些麻煩。
歡迎通過評論討論、指教。