產生原因:手機使用了300ms的延遲來判定用戶是否發生雙擊行爲。
解決問題:
1.禁用縮放
表明這個頁面是不可縮放的,此時瀏覽器可以禁用默認的雙擊縮放行爲並且去掉300ms的點擊延遲。
缺點:這樣會完全禁用縮放功能。
2.更改默認的可視寬度
設置了上述meta標籤,那瀏覽器就可以認爲該網站已經對移動端做過了適配和優化,就無需雙擊縮放操作了。
它沒有完全禁用縮放,而只是禁用了瀏覽器默認的雙擊縮放行爲,但用戶仍然可以通過雙指縮放操作來縮放頁面。
3.css touch-action
touch-action這個CSS屬性。這個屬性指定了相應元素上能夠觸發的用戶代理(也就是瀏覽器)的默認行爲。如果將該屬性值設置爲touch-action: none,那麼表示在該元素上的操作不會觸發用戶代理的任何默認行爲,就無需進行300ms的延遲判斷。
4. FastClick
FastClick 是 FT Labs 專門爲解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫。FastClick的實現原理是在檢測到touchend事件的時候,會通過DOM自定義事件立即出發模擬一個click事件,並把瀏覽器在300ms之後的click事件阻止掉。
Vue的解決方法
安裝 fastclick 插件
main.js 中引入