多年來,行動瀏覽器在 touchend
到 click
之間對程式碼套用了 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 會使用觸控事件來更快觸發點擊,並移除輕觸兩下手勢。這是指你手指在 touchstart
和 touchend
之間移動的程度,能區分捲動和輕觸畫面。
將 touchstart
事件監聽器新增至所有內容都會對效能造成影響,因為較低階層的互動 (例如捲動) 會因為呼叫事件監聽器來確認是否為 event.preventDefault()
。幸好,FastClick 會避免在瀏覽器移除 300 毫秒延遲的情況下設定監聽器,因此您可以同時獲得最佳這兩者!