移動端300ms延遲的解決方法


一般情況下,如果沒有經過特殊處理,移動端瀏覽器在派發點擊事件的時候,通常會出現300ms左右的延遲。也就是說,當我們點擊頁面的時候移動端瀏覽器並不是立即作出反應,而是會等上一小會兒才會出現點擊的效果。在移動WEB興起的初期,用戶對300ms的延遲感覺不明顯。但是,隨着用戶對交互體驗的要求越來越高,現今,移動端300ms的點擊延遲逐漸變得明顯而無法忍受。那么,移動端300ms的點擊延遲是怎么來的呢?

 

 

移動端300ms的點擊延遲問題由來:

這要追溯至 2007 年初。蘋果公司在發布首款 iPhone 前夕,遇到一個問題:當時的網站都是為大屏幕設備所設計的。於是蘋果的工程師們做了一些約定,應對 iPhone 這種小屏幕瀏覽桌面端站點的問題。這當中最出名的,當屬雙擊縮放(double tap to zoom),這也是會有上述 300 毫秒延遲的主要原因。

 

雙擊縮放,顧名思義,即用手指在屏幕上快速點擊兩次,iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。 那么這和 300 毫秒延遲有什么聯系呢? 假定這么一個場景。用戶在 iOS Safari 里邊點擊了一個鏈接。由於用戶可以進行雙擊縮放或者雙擊滾動的操作,當用戶一次點擊屏幕之后,瀏覽器並不能立刻判斷用戶是確實要打開這個鏈接,還是想要進行雙擊操作。因此,iOS Safari 就等待 300 毫秒,以判斷用戶是否再次點擊了屏幕。 鑒於iPhone的成功,其他移動瀏覽器都復制了 iPhone Safari 瀏覽器的多數約定,包括雙擊縮放,幾乎現在所有的移動端瀏覽器都有這個功能。之前人們剛剛接觸移動端的頁面,在欣喜的時候往往不會care這個300ms的延時問題,可是如今touch端界面如雨后春筍,用戶對體驗的要求也更高,這300ms帶來的卡頓慢慢變得讓人難以接受。

 

解決如何解決移動端300ms延遲:

方法一:禁止縮放(在meta標簽中設置) Chorm和Firfox支持,Safari比較麻煩他還有雙擊縮放還有雙擊滾動操作

<meta name="viewport" content="user-scalable=no,initial-scale=1,maximun-scale=1"/>

  

頁面不可縮放,這樣雙擊縮放功能就沒有意義了,此時瀏覽器可以禁用默認的雙擊縮放行為並且去掉300ms的點擊延遲

缺點:必須完全禁用縮放來達到目的,但是通常情況下,我們還是希望能通過雙指來進行縮放的

 

方法二:更改默認的視口寬度(在meta標簽中設置) Chorm和Firfox支持,Safari比較麻煩他還有雙擊縮放還有雙擊滾動操作

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

虎課網https://www.wode007.com/sites/73267.html 設計塢https://www.wode007.com/sites/73738.html

如果能識別出一個網站是響應式的網站,那么移動端瀏覽器就可以自動禁止雙擊縮放行為並去掉300ms的點擊延遲。

設置上述的meta標簽,那么瀏覽器就可以認為網站已經對移動端做過適配優化,就無需雙擊操作。

好處:沒有完全禁用縮放,而是禁用瀏覽器默認的雙擊縮放行為,但用戶仍然可以通過雙指縮放操作來縮放頁面。

 

方法三:css touch-action IE支持

touch-action指定相應的元素上能夠觸發的用戶代理(瀏覽器)的默認行為。

將該屬性值設置為touch-action:none,那么表示在該元素上操作不會觸發用戶代理的任何默認行為。就無需進行300ms的延遲判斷了。

 

方法四:FastClick 專門為解決移動端瀏覽器300ms點擊延遲問題發開的一個輕量級的庫。

原理:在檢測到touchend事件的時候,會通過DOM自定義事件立即發出模擬一個click事件,並把300ms之后發出的click事件阻止掉。

 

站長


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM