300毫秒的延遲問題

移動端點擊屏幕會有一個300毫秒延遲的問題
我們也會經常有看到解決辦法 FastClick等等引用一些js文件之類的
我這個人呢,就是不見黃河不掉淚這種,我喜歡問爲什麼?而且這種爲什麼,如果是約定的那種,
比如css(表現)javascrit(行爲)html(結構),這種定義,我會很懷疑,並且覺得爲什麼是這樣定義,而不是html是架子什麼之類的。
也就是鋼精。
今天記錄300毫秒延遲的這個問題,也是解決我一直以來的疑問,我以前的時候寫過的H5頁面並沒有延遲過啊
看下面的內容
內容節選自書籍-《觸類旁通-多終端時代的觸屏界面設計》
很長一段時間,幾乎所有的觸屏瀏覽器都存在一個問題,在手指點擊屏幕300毫秒之後,目標對象上的click事件纔會被觸發。1/3秒的事件,
足夠讓用戶察覺到延遲 ,這也是觸屏設備上的網頁操作效率總是讓人覺得不如本地APP來的輕快的原因之一。探究其本質,問題就出在瀏覽器用
來縮放內容的雙擊手勢上:瀏覽器探測到第1次點擊之後,會等待300毫秒來判斷是否有第2次點擊,如果確定沒有第2次點擊,纔會將之前的行爲判定爲單擊。
所以瀏覽器其實有能力對點擊行爲進行及時響應,只是被認爲增加了延遲規則而已。
絕大多數瀏覽器都會將雙擊專門保留爲縮放所用,而Android上的chrome和Firfox在這裏取了個巧,如果頁面代碼中已經明確禁用了縮放功能,就不再通過延遲來判斷
單擊或者雙擊。看上去是一個好辦法,不過這同時也會使捏合和擴張手勢的縮放功能失效。很多人在使用移動瀏覽器訪問網頁的時候,都需要放大頁面才能閱讀內容,所以這種
爲了避免延遲而從整體上禁用頁面縮放功能的做法顯然是得不償失的。
2013年,chrome嘗試採用一種更加實用的解決方案-如果頁面的寬度定位device-width,那麼雙擊縮放行爲將不被瀏覽器受理。

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

最棒的是這種情況下,人們可以使用手指實現頁面縮放。
ie允許通過css禁用雙擊縮放功能,比如屬性touch-action。
當然對於其他的一些瀏覽器,就無能爲力了。如果確實需要在其他的瀏覽器中解決這一問題,就必須藉助一些第三方的庫了。
比如FastClick庫。還有指針事件,下次再說

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章