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

Jake Archibald
Jake Archibald

多年來,行動瀏覽器在等待 touchendclick 之間套用 300 到 350 毫秒的延遲時間,看看是否要輕觸兩下,接著確認是否要輕觸兩下,因為輕觸兩下是放大文字的手勢。

自 Chrome for Android 首次版本以來,如果同時停用雙指撥動縮放功能,這個延遲就會遭到移除。不過,雙指撥動縮放是重要的無障礙功能。自 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 不支援這項技巧,因此建議您使用可視區域標記。

對無障礙功能來說,輕按兩下放大功能是不是令人擔心的問題?

不會。雙指撥動縮放功能仍可繼續使用,而有操作手勢的使用者也能使用 OS 功能。而 Android 裝置上的放大手勢功能即可處理。這類工具甚至不必瀏覽器就能運作。

那麼舊版瀏覽器呢?

FT Labs 的 FastClick by FT Labs 使用觸控事件加快點擊速度,並移除輕觸兩下手勢。您可以查看您在 touchstarttouchend 之間移動的量,藉此區分捲動和輕觸手勢。

在所有項目中加入 touchstart 事件監聽器,會對效能造成影響,因為較低層級的互動 (例如捲動) 會延遲顯示,方法是呼叫事件監聽器來查看是否 event.preventDefault()。幸好,如果瀏覽器已經移除 300 毫秒的延遲時間,FastClick 就會避免設定監聽器,因此您可以同時享有兩者的最佳體驗!