移動端禁用雙擊放大手勢

2022-08-12 19:33:13 字數 685 閱讀 3039

網上容易找到的方法之一就是在head標籤內定義頁面元資訊(meta)viewport如下:

copy

expand

1<

meta

name

="viewport

" content

="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0

">

copy

expand

嘗試後發現並不怎麼靠譜,並沒有達到預期的效果,部分瀏覽器仍然會響應雙擊放大的手勢。最終解決方案如下:

copy

expand12

3456

7<

script

>

// 「一刀切」方案:

document

.ontouchend

=function(e

)<

/script

>

copy

expand

當然這個辦法並不理智,這樣做會導致頁面的click事件在移動端上失效,補救的辦法可以是使用ontouchstart來代替click。

其實完全可以通過避免頁面內元素超出裝置寬度來避免瀏覽器雙擊放大手勢事件,不到萬不得已最好還是在頁面css上「下功夫」,合理進行頁面布局和響應式才是正道。

移動端手勢

1.相關事件在 mobile 與 pc 之間的差異 1.1click事件的300ms延遲問題 2007年第一代iphone發布,瀏覽器自帶了乙個功能 雙擊縮放。雙擊頁面的時候,瀏覽器會智慧型的縮放當前頁面到原始大小。雙擊縮放的原理就是,當你click一次之後,會經過300ms之後檢測是否再有一次cl...

移動端手勢測試

123 function var current 0 var imgs swipe img var pages num1 span 向左左邊滑動,index為下個顯示 active display nane pages的給當前的焦點樣式 swipe on swipeleft function e 向...

移動端的複雜手勢

寫前面 我存在的目的怎麼不起作用啊 上個星期又接到 我們運維美女的需求 其中大部分都是非常簡單的!不過其中有個東西我到是蠻感興趣的 就是類似下面這個 要想實現上面這個 就要使用多點觸控了 處理多點觸控手勢並不簡單 但也不是非常困難 但是 要能真正的使用 需要很多的知識結合起來!效果gif demo君...