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

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

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

1 意外的文字改變

ios設(shè)備的旋轉(zhuǎn)將破壞布局、改變頁(yè)面中的文字大小，當(dāng)元素（例如導(dǎo)航條、菜單等）設(shè)置為固定定位時(shí)經(jīng)常產(chǎn)生類(lèi)似的問(wèn)題，只有刷新頁(yè)面才可以修復(fù)問(wèn)題。幸運(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ì)選擇所有類(lèi)型的input。

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

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

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

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

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

如果你在移動(dòng)設(shè)備上使用動(dòng)畫(huà)，請(qǐng)一定要尤其注意動(dòng)畫(huà)的性能問(wèn)題。一般來(lái)說(shuō)，瀏覽器能夠有效的動(dòng)畫(huà)以下屬性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)畫(huà)性能良好的原因是，這些屬性位于瀏覽器渲染器的頂層。你可以把一個(gè)網(wǎng)頁(yè)看成一個(gè)餐桌，動(dòng)畫(huà)這些屬性就類(lèi)似于移動(dòng)一個(gè)調(diào)羹，動(dòng)畫(huà)底層屬性類(lèi)似于移動(dòng)整個(gè)餐桌布，你需要同時(shí)移動(dòng)上面的所有覆蓋物，所以更加費(fèi)勁一些（性能就會(huì)差一點(diǎn)）。

為了最大化的支持你的動(dòng)畫(huà)，你可能需要加瀏覽器前綴(verdor prefix)。

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

5 觸摸事件(Touch Event)的坐標(biāo)注冊(cè)問(wèn)題

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

對(duì)于觸摸事件來(lái)說(shuō)，使用e.touches[0].pageX而非e.pageX獲取觸摸點(diǎn)的x坐標(biāo)，獲取y坐標(biāo)也是類(lèi)似的道理。下面是一些可能實(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
}

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

總結(jié)

本文羅列一些響應(yīng)式網(wǎng)頁(yè)開(kāi)發(fā)中的一些常見(jiàn)陷阱，并指定了對(duì)應(yīng)的解決方案，希望可以幫助你節(jié)省開(kāi)發(fā)時(shí)間。

轉(zhuǎn)載自