js禁止页面放大缩小至此，实现已结束。

57 阅读 0 评论 38 点赞

我是靠谱客的博主现实雨，最近开发中收集的这篇文章主要介绍js禁止页面放大缩小至此，实现已结束。，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

转载：https://www.cnblogs.com/dearxinli/p/7645922.html

众所周知：移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可，但是pc端确实比较麻烦，用户可以通过如下几种方式来缩放：

windows：

ctrl + +/-
ctrl + 滚轮
浏览器菜单栏

mac：

cammond + +/-
浏览器菜单栏

由于通过浏览器菜单栏放大缩小属于系统软件权限，没法控制，我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮缩放页面的情况，只能通过js来控制了。

<script type="text/javascript">
//阻止pc端浏览器缩放js代码
//由于浏览器菜单栏属于系统软件权限，没发控制，我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮缩放页面的情况，只能通过js来控制了
$(document).ready(function () {
// chrome 浏览器直接加上下面这个样式就行了，但是ff不识别
$('body').css('zoom', 'reset');
$(document).keydown(function (event) {
//event.metaKey mac的command键
if ((event.ctrlKey === true || event.metaKey === true)&& (event.which === 61 || event.which === 107 || event.which === 173 || event.which === 109 || event.which === 187 || event.which === 189)){
event.preventDefault();
}
});
$(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}
});
});
</script>

至此，实现已结束。

如果想了解更多，那就接着看：

Reference：
stackoverflow关于组织缩放的代码：http://stackoverflow.com/questions/27116221/prevent-zoom-cross-browser
jquery event.whick源码，先取charCode(mdn说明其已被废弃)再取keyCode： https://github.com/jquery/jquery/blob/master/src/event.js#L633

下面是用juery和原生js实现的代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>img</title>

</head>

<body>

<div class="wrap"></div>

<p>test测试test测试test测试test测试</p>

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

<script>

/**

* @file 禁止pc浏览器使用ctrl/cammond + +/- 或 Windows下ctrl + 滚轮缩放页面 (prevent borwser zoom)

* 众所周知：移动端页面禁止用户缩放界面只需要在<meta name="viewport" content="user-scalable=0"> 即可，但是pc端确实比较麻烦，只能通过js来控制了

* @author yangzongjun

* @date 2017-01-06

*/

/**

代码中event.whick的数字代号的意思：

mac下

chrome:

- 189

+ 187

ff:

- 173

+ 61

然后剩余的两个代号是107、109代表的是数字键盘的+-号

*/

// jqeury version

// $(document).ready(function () {

// // chrome 浏览器直接加上下面这个样式就行了，但是ff不识别

// $('body').css('zoom', 'reset');

// $(document).keydown(function (event) {

// if ((event.ctrlKey === true || event.metaKey === true)

// && (event.which === 61 || event.which === 107

// || event.which === 173 || event.which === 109

// || event.which === 187 || event.which === 189))

// {

// event.preventDefault();

// }

// });

// $(window).bind('mousewheel DOMMouseScroll', function (event) {

// if (event.ctrlKey === true || event.metaKey) {

// event.preventDefault();

// }

// });

// 原生js来实现，避免依赖jquery。需要注意的是：addEventListener/DOMContentLoaded在ie中是只支持>=ie9的，一般足够了

document.addEventListener('DOMContentLoaded', function (event) {

// chrome 浏览器直接加上下面这个样式就行了，但是ff不识别

document.body.style.zoom = 'reset';

document.addEventListener('keydown', function (event) {

if ((event.ctrlKey === true || event.metaKey === true)

&& (event.which === 61 || event.which === 107

|| event.which === 173 || event.which === 109

|| event.which === 187 || event.which === 189))

{

event.preventDefault();

}

}, false);

document.addEventListener('mousewheel DOMMouseScroll', function (event) {

if (event.ctrlKey === true || event.metaKey) {

event.preventDefault();

}

}, false);

</script>

</body>

</html>

获取当前页面浏览器的缩放大小：

// 判断pc浏览器是否缩放，若返回100则为默认无缩放，如果大于100则是放大，否则缩小

function detectZoom (){

var ratio = 0,

screen = window.screen,

ua = navigator.userAgent.toLowerCase();

if (window.devicePixelRatio !== undefined) {

ratio = window.devicePixelRatio;

}

else if (~ua.indexOf('msie')) {

if (screen.deviceXDPI && screen.logicalXDPI) {

ratio = screen.deviceXDPI / screen.logicalXDPI;

}

else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {

ratio = window.outerWidth / window.innerWidth;

}

if (ratio){

ratio = Math.round(ratio * 100);

}

return ratio;

};

//具体实现demo:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>浏览器网页内容的百分比缩放（按Ctrl和+号键或者-号键的缩放）</title>

<style type="text/css">

</style>

</head>

<body>

<a href="javascript:;" id="openApp">知乎客户端</a>

<input type="text" name="ee" autocomplete="on">

</body>

</html>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

// 判断pc浏览器是否缩放，若返回100则为默认无缩放，如果大于100则是放大，否则缩小

function detectZoom (){

var ratio = 0,

screen = window.screen,

ua = navigator.userAgent.toLowerCase();

if (window.devicePixelRatio !== undefined) {

ratio = window.devicePixelRatio;

}

else if (~ua.indexOf('msie')) {

if (screen.deviceXDPI && screen.logicalXDPI) {

ratio = screen.deviceXDPI / screen.logicalXDPI;

}

else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {

ratio = window.outerWidth / window.innerWidth;

}

if (ratio){

ratio = Math.round(ratio * 100);

}

return ratio;

};

//window.onresize 事件可用于检测页面是否触发了放大或缩小。

$(function(){

//alert(detectZoom())

})

$(window).on('resize',function(){

isScale();

});

//判断PC端浏览器缩放比例不是100%时的情况

function isScale(){

var rate = detectZoom();

if(rate != 100){

//如何让页面的缩放比例自动为100,'transform':'scale(1,1)'没有用，又无法自动条用键盘事件，目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0

console.log(1)

alert('当前页面不是100%显示，请按键盘ctrl+0恢复100%显示标准，以防页面显示错乱！')

}

//阻止pc端浏览器缩放js代码

//由于浏览器菜单栏属于系统软件权限，没发控制，我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮缩放页面的情况，只能通过js来控制了

// jqeury version

$(document).ready(function () {

// chrome 浏览器直接加上下面这个样式就行了，但是ff不识别

$('body').css('zoom', 'reset');

$(document).keydown(function (event) {

//event.metaKey mac的command键

if ((event.ctrlKey === true || event.metaKey === true)&& (event.which === 61 || event.which === 107 || event.which === 173 || event.which === 109 || event.which === 187 || event.which === 189)){

event.preventDefault();

}

});

$(window).bind('mousewheel DOMMouseScroll', function (event) {

if (event.ctrlKey === true || event.metaKey) {

event.preventDefault();

}

});

</script>