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

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

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

好的，言歸正傳。

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

1. 意外的文字改變

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

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

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

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

2. 非期望的表單樣式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

對(duì)于觸摸事件來說，使用e.touches[0].pageX而非e.pageX獲取觸摸點(diǎn)的x坐標(biāo)，獲取y坐標(biāo)也是類似的道理。下面是一些可能實(shí)際應(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ā)中的一些常見陷阱，并指定了對(duì)應(yīng)的解決方案，希望可以對(duì)您為您節(jié)省時(shí)間，少些麻煩。

歡迎通過評(píng)論討論、指教。

英文原文：sitepoint，譯文：csdn