1. 引言

原文：Sitepoint的5 Responsive Design Pitfalls and How to Avoid Them
譯言：希望能夠對大家所有幫助。

2. 正文

2.1 引入

想象這樣的場景： 您剛剛建立了一個傑出的響應式設計，然後準備在移動裝置中測試一下。在您意想不到的地方產生了一些問題，文字亂糟糟的，動畫波濤洶湧，表單沒有呈現您設計的樣式。然後花費N多時間修復這些問題，您可能抓狂地把電腦扔出窗外砸中鄰居家的貓。

好訊息是，我準備在本篇文章裡介紹這些可能令您抓狂的問題，並講解相應的解決方案。主要包括以下五個問題：

1. 意外的文字改變
2. 非期望的表單樣式
3. 誤導的模擬器錯誤
4. 桌面端表現良好動畫的移動端呈現問題
5. 觸控事件(Touch Event)的座標註冊問題

好的，言歸正傳。

本文假設您瞭解響應式網頁開發的基礎知識，否則您可能需要進行一下提升(簡明教程)。

2.1 意外的文字改變

ios裝置的旋轉將破壞佈局、改變頁面中的文字大小，當元素（例如導航條、選單等）設定為固定定位時經常產生類似的問題，只有重新整理頁面才可以修復問題。幸運的是，有一個方法可以防患於未然。

在您的css中新增如下程式碼

該程式碼設定橫屏時文字的縮放為100%，從而防止意外的文字改變發生。

2.2 非期望的表單樣式

平板或移動裝置經常呼叫預設樣式搞糟您的表單樣式，我們可以使用如下的css程式碼阻止表單的預設樣式。

您可以根據需要選擇重置的表單，例如將 input[type=text] 改變為 input 會選擇所有型別的input。

2.3 誤導的模擬器錯誤(mulator Errors)

如果您使用基於瀏覽器的移動模擬器進行測試，有時會產生一些煩人的問題。在您程式碼沒有問題的情況下丟擲一個問題，令人糾結。

例如，有一次正在開發中的頁面底部的導航條莫名其妙的消失了，正當我準備查詢問題原因時，我發現Chrome模擬器的視窗底部被切掉一部分，當我在新tab中開啟頁面，然後切換移動檢視重新整理之後就解決了問題。

遇到類似的問題，最為重要的是，要保證您的程式碼沒問題僅僅是模擬器的問題。您可以嘗試隔離問題區域看看程式碼是否正常工作，然後在真正的移動裝置上測試一下。

2.4 桌面端表現良好動畫的移動端呈現問題

如果您在移動裝置上使用動畫，請一定要尤其注意動畫的效能問題。一般來說，瀏覽器能夠有效的動畫以下屬性translate、scale、rotate和 opacity等，例如下面的案例。

這些屬性動畫效能良好的原因是，這些屬性位於瀏覽器渲染器的頂層。您可以把一個網頁看成一個餐桌，動畫這些屬性就類似於移動一個調羹，動畫底層屬性類似於移動整個餐桌布，您需要同時移動上面的所有覆蓋物，所以更加費勁一些（效能就會差一點）。

您可以通過閱讀這篇文章，瞭解動畫效能的更多資訊。

為了最大化的支援您的動畫，您可能需要加瀏覽器字首(verdor prefix)，您也可以到Caniuse瞭解更多的相容情況。

另外注意，盒陰影(box-shadow)有時會影響動畫效能，所以強烈建議使用盒陰影時注意移動裝置的測試。

2.5 觸控事件(Touch Event)的座標註冊問題

觸控事件的座標註冊問題也比較微妙，因為座標在不同裝置中儲存區域不同。一些裝置(例如ios)的觸控座標和單擊座標相同，而另一些（例如android）裝置則不同。好訊息是，在任何移動裝置中都可以通過特定的觸控事件資料（touch event data）獲取座標。

對於觸控事件來說，使用e.touches[0].pageX而非e.pageX獲取觸控點的x座標，獲取y座標也是類似的道理。下面是一些可能實際應用的程式碼。

大家不妨模擬器裡測試下上面的程式碼。

2.6 總結

本文羅列一些響應式網頁開發中的一些常見陷阱，並指定了對應的解決方案，希望可以對您為您節省時間，少些麻煩。

歡迎通過評論討論、指教。