1、普通瀏覽器眯搭,只需要增加meta標(biāo)簽禁止縮放功能就行了
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
- user-scalable=no或0 //禁止雙指縮放頁(yè)面
- initial-scale=1.0, maximum-scale=1.0 //禁止屏幕放大縮小功能
2窥翩、以上解決了普通瀏覽器的雙擊放大和雙指縮放功能,但是safari瀏覽器還是存在放大功能鳞仙,并沒(méi)有解決寇蚊。所以要添加一下js代碼,來(lái)禁止safari瀏覽器的縮放功能棍好。
//阻止safari瀏覽器雙擊放大功能
let lastTouchEnd = 0 //更新手指彈起的時(shí)間
document.documentElement.addEventListener("touchstart", function (event) {
//多根手指同時(shí)按下屏幕仗岸,禁止默認(rèn)行為
if (event.touches.length > 1) {
event.preventDefault();
}
});
document.documentElement.addEventListener("touchend", function (event) {
let now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
//當(dāng)兩次手指彈起的時(shí)間小于300毫秒,認(rèn)為雙擊屏幕行為
event.preventDefault();
}else{ // 否則重新手指彈起的時(shí)間
lastTouchEnd = now;
}
}, false);
//阻止雙指放大頁(yè)面
document.documentElement.addEventListener("gesturestart", function (event) {
event.preventDefault();
});
3借笙、ok扒怖,加上以上meta標(biāo)簽和js代碼,解決了禁止全部瀏覽器的雙擊放大和雙指縮放頁(yè)面功能提澎。