js实现禁⽌pc端浏览器缩放和获取当前页⾯浏览器的缩放⼤⼩
众所周知：移动端页⾯禁⽌⽤户缩放界⾯只需加上<meta name="viewport" content="user-scalable=0">即可，但是pc端确实⽐较⿇烦，⽤户可以通过如下⼏种⽅式来缩放：windows：
1. ctrl + +/-
2. ctrl + 滚轮
初一下册期中试卷3. 浏览器菜单栏
mac：
1. cammond + +/-
2. 浏览器菜单栏
由于浏览器菜单栏属于系统软件权限，没发控制，我们着⼿解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮缩放页⾯的情况，只能通过js来控制了
下⾯是⽤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="cdn.bootcss/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 ((lKey === true || aKey === 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 (lKey === true || aKey) {
/
/ event.preventDefault();
// }
// });
// });
// 原⽣js来实现，避免依赖jquery。需要注意的是：addEventListener/DOMContentLoaded在ie中是只⽀持>=ie9的，⼀般⾜够了
document.addEventListener('DOMContentLoaded', function (event) {
// chrome 浏览器直接加上下⾯这个样式就⾏了，但是ff不识别
document. = 'reset';
document.addEventListener('keydown', function (event) {
if ((lKey === true || aKey === 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 (lKey === true || aKey) {
event.preventDefault();
}
}, false);
}, false);
</script>
</body>
</html>
获取当前页⾯浏览器的缩放⼤⼩：
// 判断pc浏览器是否缩放，若返回100则为默认⽆缩放，如果⼤于100则是放⼤，否则缩⼩
function detectZoom (){
var ratio = 0,
screen = window.screen,
ua = LowerCase();
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 = und(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 = LowerCase();
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 = und(ratio * 100);
}
return ratio;
};
//size 事件可⽤于检测页⾯是否触发了放⼤或缩⼩。
$(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) {
//aKey mac的command键
if ((lKey === true || aKey === 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 (lKey === true || aKey) {
event.preventDefault();
}
});
});
</script>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论