溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何解決移動端禁止雙指縮放功能的問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
做移動端開發(fā)，給頁面頭部添加了meta標簽，并添加了user-scalable=no屬性禁止雙指或雙擊放大：在實際開發(fā)中，我們禁止縮放的實現(xiàn)方式：
禁止雙指縮放meta設置：
<metaname="viewport"content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"/>
user-scalabel=no或者user-scalabel=yes(yes是可以縮放，no或者0是不能縮放)
在ios10以上的系統(tǒng)中，并不支持meta標簽，需要我們通過腳本實現(xiàn)：
window.addEventListener(
"touchmove",
function(event){
if(event.scale!==1){
event.preventDefault();
}
},{
passive:false
}
);
注意：禁用雙指縮放后，scroll事件需要重新綁定，滾動條的事件監(jiān)聽touchmove，touchstart,touchend;
禁止雙指縮放解決方法
<metaname="viewport"content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
但有些移動端瀏覽器，比如IOS10以上的Safari，安卓系統(tǒng)下的UC瀏覽器、QQ瀏覽器等，為了更好的用戶體驗，并沒有遵循開發(fā)者禁止縮放的指定，雖然meta標簽按如上寫法，但依然允許用戶雙指縮放和雙擊放大。
解決方法是再加一段js，通過touchmove事件判斷多個手指（touches.length），并通過阻止事件冒泡event.preventDefault()來實現(xiàn)。
寫了個demo，大家可以參考，點這里可以在線預覽:禁止移動端個別瀏覽器縮放
PS：實測UC瀏覽器在我們多次雙指操作后，還是會突破我們的限制，實現(xiàn)系統(tǒng)級強制對頁面按照用戶的意愿雙指縮放，淘寶、天貓等大廠的站也是一樣，所以，通過web代碼，完全實現(xiàn)禁止用戶縮放，目前是無法實現(xiàn)的。心疼前端兄弟們一秒鐘。。。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>禁止移動端某些瀏覽器縮放</title>
</head>
<body>
<div>孫琪崢博客<br>www.sunqizheng.com<br/>用兩個手指試下，不能縮放哦!</div>
<style>
*{
padding:0;
margin:0;
}
html,
body{
width:100%;
height:100%;
}
感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決移動端禁止雙指縮放功能的問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
