對(duì)于移動(dòng)上網(wǎng)人口節(jié)節(jié)高升的趨勢(shì)，許多網(wǎng)站也推出了移動(dòng)版網(wǎng)站，或是利用 Responsive Web Design （自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)）來增進(jìn)網(wǎng)站在移動(dòng)設(shè)備上的體驗(yàn)。在 2013 年的今天，網(wǎng)頁(yè)開發(fā)者利用 CSS media query 在不同尺寸來達(dá)到不同的排版已經(jīng)是基本工，但是關(guān)于『自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)』還有更多的細(xì)節(jié)等著設(shè)計(jì)師與開發(fā)者去改善，例如利用?Lettering.js?讓字體大小也能隨著設(shè)備大小而變動(dòng)，或是利用?Retina.js?讓高像素密度（ppi）較高的移動(dòng)設(shè)備，可以欣賞到高分辨率的圖片。

300 毫秒時(shí)間差

這次要提到的是網(wǎng)頁(yè)在移動(dòng)設(shè)備上觸摸（touch）與點(diǎn)擊（click）的不同之處，在?W3C 草案中 touch 共有 touchstart、touchend、touchmove、touchcancel，在 Goolge IO 2013 中?Mobile HTML : The Future of Your Sites?這個(gè)議程中，從 22 分 10 秒的地方開始，有針對(duì) touchstart、touchend、touchmove 這三個(gè)事件做了一個(gè) Demo，同時(shí)也演示了 touchstart 與 click 事件（event）之間有 300 毫秒（ms）的差異。

300 毫秒的時(shí)間差，看起來很短，但是卻會(huì)讓使用者一直處在『到底按到了沒有』的疑問之中。因?yàn)樵谝苿?dòng)設(shè)備中，我們不僅有點(diǎn)擊（click）的事件，我們還有點(diǎn)擊兩下（double click）放大、捲動(dòng)（scroll）等指令，300 毫秒延遲的設(shè)定系為了偵測(cè)其他事件而存在的。

▲ 一個(gè)往下捲動(dòng)的動(dòng)作，里面也包含了觸摸事件

▲ 在 Google IO 的演示當(dāng)中，touchend 有 60 毫秒、click 有 300 毫秒的時(shí)間差

要知道這 300 毫秒的影響有多大，我們直接拿起手機(jī)，進(jìn)入臺(tái)灣最多人設(shè)為首頁(yè)的 Yahoo 奇摩 移動(dòng)版網(wǎng)站。在瀏覽網(wǎng)站時(shí)，因?yàn)樵邳c(diǎn)擊超連結(jié)時(shí)也需要等待一個(gè)有點(diǎn)久的時(shí)間，所以使用者不容易發(fā)現(xiàn) 300 毫秒的時(shí)間差，不過今天如果是一個(gè)選單按鈕呢？

我們點(diǎn)擊左上角選單按鈕，感受一下選單打開變成右邊的樣子。嗯～似乎感受到有些延遲，雖然有沒辦法慢慢去挖出程式碼去證明這個(gè)按鈕是點(diǎn)擊事件，不過應(yīng)該八九不離十了。不過并不是 Yahoo 里面所有按鈕都是點(diǎn)擊事件，我們點(diǎn)擊新聞分類，切換到該頁(yè)面去。

再點(diǎn)擊一次左上角選單按鈕，咦～是不是感覺變快了，這是因?yàn)樵摪粹o的事件應(yīng)該是用 touchend 的事件去做觸發(fā)，我們來做個(gè)小實(shí)驗(yàn)，我們像下圖一樣手指的起點(diǎn)從選單按鈕開始，然后再螢?zāi)簧蟻y畫一通，最后再其他地方放開，選單一樣會(huì)打開，這個(gè)行為就可以確定是使用了 touchend 事件。使用 touch 事件在移動(dòng)設(shè)備上是不是有更好的體驗(yàn)了呢！

點(diǎn)擊下去的那瞬間的細(xì)節(jié)

避免 300 毫秒的時(shí)間差，并沒有解決所有的問題，在以往的網(wǎng)頁(yè)設(shè)計(jì)上，我們可能只會(huì)去處理到 hover 的效果，不過在觸控設(shè)備上，hover 的效果卻沒有辦法好好發(fā)揮，我們需要借助 touchstart 事件來做出點(diǎn)擊的效果。在?Firefox style guide?也訂出按鈕需要有 閒置（idle）、下壓（press）、關(guān)閉（disabled）幾種狀態(tài)。

在先前 Yahoo 的案例里，雖然有 300 毫秒的延遲，但是我們卻沒有『到底有沒有點(diǎn)到』的窘境，仔細(xì)觀察一下，就會(huì)發(fā)現(xiàn)在點(diǎn)擊選單按鈕時(shí)，在 touchstart 事件時(shí)皆有不同的效果，因此我們才會(huì)知道，原來我們有點(diǎn)擊到，然后再感受到跳出選單的時(shí)間有延遲。

▲ Yahoo 移動(dòng)版網(wǎng)站中，選單按鈕都有點(diǎn)擊瞬間的視覺效果

自適應(yīng)網(wǎng)頁(yè)實(shí)作

不過當(dāng)網(wǎng)頁(yè)里面使用觸摸事件時(shí)，用鼠標(biāo)點(diǎn)擊想當(dāng)然是沒有效果，但是如果把觸摸與點(diǎn)擊事件同時(shí)用上時(shí)，在移動(dòng)設(shè)備上又會(huì)造成重復(fù)的點(diǎn)擊。在這邊可以利用 Modernizr 在網(wǎng)頁(yè)中加載 modernizr.js，當(dāng)網(wǎng)頁(yè)開啟后開啟瀏覽器的開發(fā)者工具，我們發(fā)現(xiàn)在 html 標(biāo)簽里，增加了好多個(gè) class 其中 no-touch，就表示這個(gè)設(shè)備不支持觸摸，如果支持觸摸就有 touch 這個(gè) class。

▲ html 標(biāo)簽中有 no-touch 這個(gè) class 表示該設(shè)備不支持觸控

▲ html 標(biāo)簽中有 touch 這個(gè) class 表示該設(shè)備支持觸控

這樣一來我們就可以容易的判斷設(shè)備是否支持觸摸，在利用 javascript 去控制該用點(diǎn)擊還是觸摸事件了喔。

via：盒子UI