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

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

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

好的，言歸正傳。

本文假設(shè)您了解響應(yīng)式網(wǎng)頁開發(fā)的基礎(chǔ)知識，否則您可能需要進行一下提升(簡明教程)。

1. 意外的文字改變

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

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

html {
    /* 防止橫屏?xí)r的文字縮放 */
    -webkit-text-size-adjust: 100%;
}

該代碼設(shè)置橫屏?xí)r文字的縮放為100%，從而防止意外的文字改變發(fā)生。

2. 非期望的表單樣式

平板或移動設(shè)備經(jīng)常調(diào)用默認樣式搞糟您的表單樣式，我們可以使用如下的css代碼阻止表單的默認樣式。

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

您可以根據(jù)需要選擇重置的表單，例如將input[type=text]改變?yōu)?code>input會選擇所有類型的input。

3. 誤導(dǎo)的仿真器錯誤(mulator Errors)

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

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

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

4. 桌面端表現(xiàn)良好動畫的移動端呈現(xiàn)問題

如果您在移動設(shè)備上使用動畫，請一定要尤其注意動畫的性能問題。一般來說，瀏覽器能夠有效的動畫以下屬性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 */

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

您可以通過閱讀這篇文章，了解動畫性能的更多信息。

為了最大化的支持您的動畫，您可能需要加瀏覽器前綴(verdor prefix)，您也可以到Caniuse了解更多的兼容情況。

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

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

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

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

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

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

總結(jié)

本文羅列一些響應(yīng)式網(wǎng)頁開發(fā)中的一些常見陷阱，并指定了對應(yīng)的解決方案，希望可以對您為您節(jié)省時間，少些麻煩。

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

英文原文：sitepoint，譯文：csdn