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

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

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

1 意外的文字改變

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

在你的css中添加如下代碼：

html {
    /* 防止橫屏時的文字縮放 */
    -webkit-text-size-adjust: 100%;
}

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

2 非期望的表單樣式

平板或移動設備經常調用默認樣式搞糟您的表單樣式，我們可以使用如下的css代碼阻止表單的默認樣式。

input[type=text], button, select, textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0px;
}

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

3 誤導的仿真器錯誤(mulator Errors)

如果你使用基于瀏覽器的移動仿真器進行測試，有時會產生一些煩人的問題。在你代碼沒有問題的情況下拋出一個問題，令人糾結。

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

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

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

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

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)。

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

5 觸摸事件(Touch Event)的坐標注冊問題

觸摸事件的坐標注冊問題也比較微妙，因為坐標在不同設備中存儲區域不同。一些設備(例如ios)的觸摸坐標和單擊坐標相同，而另一些（例如android）設備則不同。好消息是，在任何移動設備中都可以通過特定的觸摸事件數據（touch event data）獲取坐標。

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

/* 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
}

大家不妨模擬器里測試下上面的代碼。

總結

本文羅列一些響應式網頁開發中的一些常見陷阱，并指定了對應的解決方案，希望可以幫助你節省開發時間。

轉載自