溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)javascript如何實現(xiàn)禁止縮放的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
javascript實現(xiàn)禁止縮放的方法：1、設(shè)置對應(yīng)瀏覽器的啟動參數(shù)來禁止用戶縮放頁面；2、設(shè)置meta來禁止用戶縮放頁面；3、通過js監(jiān)聽來禁止用戶縮放頁面；4、禁用“ontouchmove”事件；5、通過多點觸摸手勢庫實現(xiàn)。
本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
javascript怎么實現(xiàn)禁止縮放？
javascript瀏覽器禁止用戶放大縮小的五種方法
方案一：設(shè)置對應(yīng)瀏覽器的啟動參數(shù)來禁止用戶縮放頁面
這種方案在自建平臺上，自選的指定瀏覽器上效果是可以的，但是不推薦，比如chrome主要通過設(shè)置* { touch-acion : none }來實現(xiàn)禁用縮放的方法，具體方案可自行搜索,我也沒有進行相關(guān)測試。
touch-acion的參數(shù)意義如下：
auto：默認值。瀏覽器允許一些手勢（touch）操作在設(shè)置了此屬性的元素上，例如：對視口（viewport）平移、縮放等操作。
none：禁止觸發(fā)默認的手勢操作。
pan-x：可以在父級元素(the nearest ancestor)內(nèi)進行水平移動的手勢操作。
pan-y：可以在父級元素內(nèi)進行垂直移動的手勢操作。
manipulation：允許手勢水平/垂直平移或持續(xù)的縮放。任何auto屬性支持的額外操作都不支持。
注：touch-action只支持具有CSS width和height屬性的元素。這個限制的目的是幫助瀏覽器優(yōu)化低延時的手勢操作。對于默認不支持此屬性的元素，如這種內(nèi)聯(lián)元素，可以給它設(shè)置display:block這樣的CSS屬性來支持width和height。未來W3C規(guī)范會將此API擴展到支持所有元素。
方案二：設(shè)置meta來禁止用戶縮放頁面
這是搜索后經(jīng)常出現(xiàn)的方案，但是現(xiàn)在，這個標簽在新的瀏覽器（比如在ios10+）中已經(jīng)失效，換言之，對于老版本的瀏覽器可能有效。
在Android的自帶瀏覽器中(例如華為，魅族，小米)第一次手動縮放時，會提示–再次操作可強制縮放網(wǎng)頁—；再次縮放也可以縮放；
這一現(xiàn)象意味著meta標簽的失效。在Android的chrome中不可以用戶縮放（表現(xiàn)正常）
直接上代碼（在.html文件中的<head></head>之間添加如下語句）：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
方案三：通過js監(jiān)聽來禁止用戶縮放頁面
直接上代碼：
window.onload=function(){
document.addEventListener('touchstart',function (event) {
if(event.touches.length>=2){
event.preventDefault();
}
})
document.addEventListener('touchmove',function (event) {
if(event.touches.length>=2){
event.preventDefault();
}
})
document.addEventListener('touchend',function (event) {
if(event.touches.length>=2){
event.preventDefault();
}
})
}其中的event.touches.length是獲取當天有幾個點擊事件同時發(fā)生，簡單而言，就是有幾個手指同時點擊了屏幕，以為一般縮放操作都是兩個手指以上進行的，所以這里應(yīng)該滿足的條件為event.touches.length>=2。不足之處就是禁用了所有的多點觸控的操作。
【推薦：javascript高級教程】
方案四：禁用“ontouchmove”事件
因為縮放屏幕必然跟隨著雙指的ontouchmove事件，我們在<html></html>標簽內(nèi)加入禁用該事件的函數(shù)event.preventDefault()即可，這招非常暴力，意味著全局無法使用使用滑動、拖動等動作，只接受點擊動作。
代碼如下——
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ontouchmove="event.preventDefault();"> <head> /****some code***/ </head> <body> /****some code***/ </body> </html>
其中的event.preventDefault()函數(shù)將通知 Web 瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認動作（如果存在這樣的動作）。例如，如果 type 屬性是 “submit”，在事件傳播的任意階段可以調(diào)用任意的事件句柄，通過調(diào)用該方法，可以阻止提交表單。注意，如果 Event 對象的 cancelable 屬性是 fasle，那么就沒有默認動作，或者不能阻止默認動作。無論哪種情況，調(diào)用該方法都沒有作用。
寫到這里，忽然想到，是否只禁用某個<div></div>區(qū)塊的ontouchmove事件，比如：
<div ontouchmove="event.preventDefault();"></div>
但這種區(qū)塊禁用的方式我還沒有測試，你可以說我比較懶了，自己去測試吧～～～～
然而還沒有得瑟一個月，我就有了這個需求，補充如下，直接上實現(xiàn)代碼：
var singleTouchFlag; //多指觸控標識符
$("#songList").on("touchstart", function (e) { //引用了jquery庫，我所要多指禁止的區(qū)域id為“songList”
// 判斷默認行為是否可以被禁用
console.log("touchstart Entered!!!");
if (e.cancelable) {
// 判斷默認行為是否已經(jīng)被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
if (1 == parseInt(e.originalEvent.touches.length)) {
singleTouchFlag = true;
// do something
} else {
singleTouchFlag = false;
}
});
$("#songList").on("touchmove", function (e) {
// 判斷默認行為是否可以被禁用
if (e.cancelable) {
// 判斷默認行為是否已經(jīng)被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
if (singleTouchFlag) {
//do something
}
});
$("#songList").on("touchend", function (e) {
// 判斷默認行為是否可以被禁用
console.log("touchend Entered!!!");
if (e.cancelable) {
// 判斷默認行為是否已經(jīng)被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
if (singleTouchFlag) {
//do something
}
});方案五：借助于**多點觸摸手勢庫“hammer.js ”**解決
hammer.js 是一個多點觸摸手勢庫，能夠為網(wǎng)頁加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多點觸摸事件，免去自己監(jiān)聽底層touchstart、touchmove、touchend事件并且寫一大堆判斷邏輯的痛苦。
hammer.js 不但支持觸摸屏設(shè)備的瀏覽器，在桌面瀏覽器上，也能將鼠標的點擊當做觸摸，方便開發(fā)人員在桌面瀏覽器上調(diào)試。（JS仔在自己的隨手背項目里面也用了hammer.js，真心好用）
直接上代碼（在.html文件中的<head></head>之間添加如下語句）：
<script src = "http://eightmedia.github.com/hammer.js/hammer.js" > </script>
<script>
window.onload = function () {
var hammerMusicBlock = new Hammer(document.getElementById("musicBlock"));
hammerMusicBlock.ontransformstart = function (ev) { ev.preventDefault(); }; // double fingers touchstart
hammerMusicBlock.ontransform = function (ev) { ev.preventDefault(); }; // double fingers touchmove
hammerMusicBlock.ontransformend = function (ev) { ev.preventDefault(); }; // double fingers touchend
}
</script>hammer.js 其他的使用方式簡介，直接看代碼：
<script src = "http://eightmedia.github.com/hammer.js/hammer.js" > </script>
// 先要對監(jiān)聽的DOM進行一些初始化
var hammer = new Hammer ( document . getElementById ( "container" ) ) ;
// 然后加入相應(yīng)的回調(diào)函數(shù)即可
hammer . ondragstart = function ( ev ) { } ; // 開始拖動
hammer . ondrag = function ( ev ) { } ; // 拖動中
hammer . ondragend = function ( ev ) { } ; // 拖動結(jié)束
hammer . onswipe = function ( ev ) { } ; // 滑動
hammer . ontap = function ( ev ) { } ; // 單擊
hammer . ondoubletap = function ( ev ) { } ; //雙擊
hammer . onhold = function ( ev ) { } ; // 長按
hammer . ontransformstart = function ( ev ) { } ; // 雙指收張開始
hammer . ontransform = function ( ev ) { } ; // 雙指收張中
hammer . ontransformend = function ( ev ) { } ; // 雙指收張結(jié)束
hammer . onrelease = function ( ev ) { } ; // 手指離開屏幕
hammer.js 還支持jQuery插件的形式調(diào)用：
<script src = "http://eightmedia.github.com/hammer.js/jquery.hammer.js" > </script>
$ ( "#element" )
. hammer ( {
// 對DOM進行一些初始化，這里可以加入一些參數(shù)
} )
. bind ( "tap" , function ( ev ) {
console . log ( ev ) ;
} ) ;感謝各位的閱讀！關(guān)于“javascript如何實現(xiàn)禁止縮放”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發(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)站二維碼