十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營(yíng)維護(hù)+專業(yè)推廣+無(wú)憂售后,網(wǎng)站問(wè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)的。心疼前端兄弟們一秒鐘。。。
*{
padding:0;
margin:0;
}
html,
body{
width:100%;
height:100%;
}
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何解決移動(dòng)端禁止雙指縮放功能的問(wèn)題”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!