1. 程式人生 > >bc現金盤開發移動端300ms延遲的解決方法

bc現金盤開發移動端300ms延遲的解決方法

a標簽 touchend 如果能 缺點 響應式 fas view fastclick ast

方法一:bc現金盤開發禁止縮放(在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"/>

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

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

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

方法三:css touch-action IE支持

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

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

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

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

bc現金盤開發移動端300ms延遲的解決方法