輕觸螢幕延遲時間 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 不支援這項技術,因此最好使用可視區域標記。

是否曾擔心點按兩次放大無障礙設計?

不需要。雙指撥動縮放功能可以繼續使用,如果使用者覺得這個手勢操作困難,作業系統功能會自動調整。而在 Android 裝置上,放大手勢則可處理。這類工具甚至可直接在瀏覽器外執行。

舊版瀏覽器會怎麼運作?

FastClick by FT Labs 會使用觸控事件來更快觸發點擊,並移除輕觸兩下手勢。這是指你手指在 touchstarttouchend 之間移動的程度,能區分捲動和輕觸畫面。

touchstart 事件監聽器新增至所有內容都會對效能造成影響,因為較低階層的互動 (例如捲動) 會因為呼叫事件監聽器來確認是否為 event.preventDefault()。幸好,FastClick 會避免在瀏覽器移除 300 毫秒延遲的情況下設定監聽器,因此您可以同時獲得最佳這兩者!