輕觸螢幕延遲時間 300 毫秒,不再顯示

Jake Archibald
Jake Archibald

多年以來,行動瀏覽器會在 touchendclick 之間延遲 300 到 350 毫秒,等待系統判斷是否要執行雙擊手勢,因為雙擊是用來放大文字的手勢。

自從 Android 版 Chrome 推出第一個版本以來,如果同時停用雙指縮放功能,就不會出現這項延遲現象。不過,捏合縮放是重要的無障礙功能。自 Chrome 32 版 (2014 年) 起,針對行動裝置最佳化的網站,這項延遲現象已消失且不會移除雙指縮放功能!不久後,Firefox 和 IE/Edge 也採取了相同的做法,而 2016 年 3 月,iOS 9.3 也推出了類似的修正。

效能差異非常大!

使用者介面能立即回應,表示使用者可以放心快速按下每個按鈕,而非暫停等待回應。如要進一步瞭解人類反應時間和網站效能對應用程式體驗的影響,請參閱RAIL 簡介

如要移除 300 到 350 毫秒的輕觸延遲時間,只要在頁面的 <head> 中加入下列程式碼即可:

<meta name="viewport" content="width=device-width">

這會將可視區域寬度設為與裝置相同,通常是針對行動裝置最佳化的網站最佳做法。使用這個標記時,瀏覽器會假設您已讓文字在行動裝置上可讀,並且放棄雙擊放大功能,以便加快點擊速度。

如果您無法進行這項變更,可以使用 touch-action: manipulation 在網頁或特定元素上達到相同效果:

html {
    touch-action: manipulation;
}

Safari 不支援這項技巧,因此建議使用 viewport 標記。

失去雙擊放大功能是否會影響無障礙功能?

否。雙指撥動放大縮小功能仍可正常運作,而且 OS 功能可滿足使用者對這項手勢的疑慮。在 Android 上,放大手勢會負責處理這項作業。這類工具甚至可以在瀏覽器外執行。

舊版瀏覽器的情況如何?

FT Labs 的 FastClick 會使用觸控事件更快觸發點擊,並移除雙擊手勢。系統會查看您在 touchstarttouchend 之間移動手指的距離,以區分捲動和輕觸。

touchstart 事件監聽器新增至所有項目都會影響效能,因為呼叫事件監聽器以查看是否 event.preventDefault() 會導致捲動等較低層級互動延遲。幸好,如果瀏覽器已移除 300 毫秒的延遲時間,FastClick 就會避免設定事件監聽器,讓您同時享有兩者的優點!