如何解決移動(dòng)端禁止雙指縮放功能的問(wèn)題-創(chuàng)新互聯(lián)

這篇文章主要介紹了如何解決移動(dòng)端禁止雙指縮放功能的問(wèn)題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

做移動(dòng)端開發(fā)，給頁(yè)面頭部添加了meta標(biāo)簽，并添加了user-scalable=no屬性禁止雙指或雙擊放大：在實(shí)際開發(fā)中，我們禁止縮放的實(shí)現(xiàn)方式：

禁止雙指縮放meta設(shè)置：

user-scalabel=no或者user-scalabel=yes(yes是可以縮放，no或者0是不能縮放)

在ios10以上的系統(tǒng)中，并不支持meta標(biāo)簽，需要我們通過(guò)腳本實(shí)現(xiàn)：

window.addEventListener(

 "touchmove",

 function(event){

  if(event.scale!==1){

   event.preventDefault();

  }

 },{

  passive:false

 }

);

注意：禁用雙指縮放后，scroll事件需要重新綁定，滾動(dòng)條的事件監(jiān)聽touchmove，touchstart,touchend;

禁止雙指縮放解決方法

但有些移動(dòng)端瀏覽器，比如IOS10以上的Safari，安卓系統(tǒng)下的UC瀏覽器、QQ瀏覽器等，為了更好的用戶體驗(yàn)，并沒(méi)有遵循開發(fā)者禁止縮放的指定，雖然meta標(biāo)簽按如上寫法，但依然允許用戶雙指縮放和雙擊放大。

解決方法是再加一段js，通過(guò)touchmove事件判斷多個(gè)手指（touches.length），并通過(guò)阻止事件冒泡event.preventDefault()來(lái)實(shí)現(xiàn)。

寫了個(gè)demo，大家可以參考，點(diǎn)這里可以在線預(yù)覽:禁止移動(dòng)端個(gè)別瀏覽器縮放

PS：實(shí)測(cè)UC瀏覽器在我們多次雙指操作后，還是會(huì)突破我們的限制，實(shí)現(xiàn)系統(tǒng)級(jí)強(qiáng)制對(duì)頁(yè)面按照用戶的意愿雙指縮放，淘寶、天貓等大廠的站也是一樣，所以，通過(guò)web代碼，完全實(shí)現(xiàn)禁止用戶縮放，目前是無(wú)法實(shí)現(xiàn)的。心疼前端兄弟們一秒鐘。。。