這篇文章給大家分享的是有關javascript如何實現禁止縮放的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
javascript實現禁止縮放的方法：1、設置對應瀏覽器的啟動參數來禁止用戶縮放頁面；2、設置meta來禁止用戶縮放頁面；3、通過js監聽來禁止用戶縮放頁面；4、禁用“ontouchmove”事件；5、通過多點觸摸手勢庫實現。
本文操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
javascript怎么實現禁止縮放？
javascript瀏覽器禁止用戶放大縮小的五種方法
方案一：設置對應瀏覽器的啟動參數來禁止用戶縮放頁面
這種方案在自建平臺上，自選的指定瀏覽器上效果是可以的，但是不推薦，比如chrome主要通過設置* { touch-acion : none }來實現禁用縮放的方法，具體方案可自行搜索,我也沒有進行相關測試。
touch-acion的參數意義如下：
auto：默認值。瀏覽器允許一些手勢（touch）操作在設置了此屬性的元素上，例如：對視口（viewport）平移、縮放等操作。
none：禁止觸發默認的手勢操作。
pan-x：可以在父級元素(the nearest ancestor)內進行水平移動的手勢操作。
pan-y：可以在父級元素內進行垂直移動的手勢操作。
manipulation：允許手勢水平/垂直平移或持續的縮放。任何auto屬性支持的額外操作都不支持。
注：touch-action只支持具有CSS width和height屬性的元素。這個限制的目的是幫助瀏覽器優化低延時的手勢操作。對于默認不支持此屬性的元素，如這種內聯元素，可以給它設置display:block這樣的CSS屬性來支持width和height。未來W3C規范會將此API擴展到支持所有元素。
方案二：設置meta來禁止用戶縮放頁面
這是搜索后經常出現的方案，但是現在，這個標簽在新的瀏覽器（比如在ios10+）中已經失效，換言之，對于老版本的瀏覽器可能有效。
在Android的自帶瀏覽器中(例如華為，魅族，小米)第一次手動縮放時，會提示–再次操作可強制縮放網頁—；再次縮放也可以縮放；
這一現象意味著meta標簽的失效。在Android的chrome中不可以用戶縮放（表現正常）
直接上代碼（在.html文件中的<head></head>之間添加如下語句）：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
方案三：通過js監聽來禁止用戶縮放頁面
直接上代碼：
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是獲取當天有幾個點擊事件同時發生，簡單而言，就是有幾個手指同時點擊了屏幕，以為一般縮放操作都是兩個手指以上進行的，所以這里應該滿足的條件為event.touches.length>=2。不足之處就是禁用了所有的多點觸控的操作。
【推薦：javascript高級教程】
方案四：禁用“ontouchmove”事件
因為縮放屏幕必然跟隨著雙指的ontouchmove事件，我們在<html></html>標簽內加入禁用該事件的函數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()函數將通知 Web 瀏覽器不要執行與事件關聯的默認動作（如果存在這樣的動作）。例如，如果 type 屬性是 “submit”，在事件傳播的任意階段可以調用任意的事件句柄，通過調用該方法，可以阻止提交表單。注意，如果 Event 對象的 cancelable 屬性是 fasle，那么就沒有默認動作，或者不能阻止默認動作。無論哪種情況，調用該方法都沒有作用。
寫到這里，忽然想到，是否只禁用某個<div></div>區塊的ontouchmove事件，比如：
<div ontouchmove="event.preventDefault();"></div>
但這種區塊禁用的方式我還沒有測試，你可以說我比較懶了，自己去測試吧～～～～
然而還沒有得瑟一個月，我就有了這個需求，補充如下，直接上實現代碼：
var singleTouchFlag; //多指觸控標識符
$("#songList").on("touchstart", function (e) { //引用了jquery庫，我所要多指禁止的區域id為“songList”
// 判斷默認行為是否可以被禁用
console.log("touchstart Entered!!!");
if (e.cancelable) {
// 判斷默認行為是否已經被禁用
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) {
// 判斷默認行為是否已經被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
if (singleTouchFlag) {
//do something
}
});
$("#songList").on("touchend", function (e) {
// 判斷默認行為是否可以被禁用
console.log("touchend Entered!!!");
if (e.cancelable) {
// 判斷默認行為是否已經被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
if (singleTouchFlag) {
//do something
}
});方案五：借助于**多點觸摸手勢庫“hammer.js ”**解決
hammer.js 是一個多點觸摸手勢庫，能夠為網頁加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多點觸摸事件，免去自己監聽底層touchstart、touchmove、touchend事件并且寫一大堆判斷邏輯的痛苦。
hammer.js 不但支持觸摸屏設備的瀏覽器，在桌面瀏覽器上，也能將鼠標的點擊當做觸摸，方便開發人員在桌面瀏覽器上調試。（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>
// 先要對監聽的DOM進行一些初始化
var hammer = new Hammer ( document . getElementById ( "container" ) ) ;
// 然后加入相應的回調函數即可
hammer . ondragstart = function ( ev ) { } ; // 開始拖動
hammer . ondrag = function ( ev ) { } ; // 拖動中
hammer . ondragend = function ( ev ) { } ; // 拖動結束
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 ) { } ; // 雙指收張結束
hammer . onrelease = function ( ev ) { } ; // 手指離開屏幕
hammer.js 還支持jQuery插件的形式調用：
<script src = "http://eightmedia.github.com/hammer.js/jquery.hammer.js" > </script>
$ ( "#element" )
. hammer ( {
// 對DOM進行一些初始化，這里可以加入一些參數
} )
. bind ( "tap" , function ( ev ) {
console . log ( ev ) ;
} ) ;感謝各位的閱讀！關于“javascript如何實現禁止縮放”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
