js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小
众所周知：移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可，但是pc端确实比较麻烦，用户可以通过如下几种方式来缩放：
windows：
- ctrl + +/-
- ctrl + 滚轮
- 浏览器菜单栏
mac：
- cammond + +/-
- 浏览器菜单栏
由于浏览器菜单栏属于系统软件权限，没发控制，我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况，只能通过js来控制了
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);
}, 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>
js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小的更多相关文章
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...
- js判断是pc端还是移动端
function checkMobile() { var pda_user_agent_list = new Array("2.0 MMP", "240320" ...
- 移动端，PC端，微信等常用平台和浏览器判断
var wzw={ //浏览器相关信息 //android webview 需要app进行支持,Android web view初始化时,在navigator中添加标识 browser:{ versi ...
- JS手机访问PC端网站自动跳转到手机端网站
<script type="text/javascript"> //移动端url跳转,自定义部分开始 function mobile_device_detect(url ...
- 关于禁止微信端webapp内部下拉出现QQ浏览器的问题
<!DOCTYPE html> <html> <head> <title></title> </head> <style ...
- 禁止 PC端打开网页 进行跳转
try {var urlhash = window.location.hash;if (!urlhash.match("fromapp")){if ((navigator.user ...
- js判断是否pc端
function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ['Android', 'iPhone', 'Symbi ...
- 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer
基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...
- 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...
随机推荐
- hdu 1276士兵队列问题【queue】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1276 士兵队列训练问题 ...
- hql查询后释放内存
Session session=getSession(); //进行session查询,取得前16个数据 Query q=session.createQuery(hql).setFirstResult ...
- 算法进阶面试题05——树形dp解决步骤、返回最大搜索二叉子树的大小、二叉树最远两节点的距离、晚会最大活跃度、手撕缓存结构LRU
接着第四课的内容,加入部分第五课的内容,主要介绍树形dp和LRU 第一题: 给定一棵二叉树的头节点head,请返回最大搜索二叉子树的大小 二叉树的套路 统一处理逻辑:假设以每个节点为头的这棵树,他的最 ...
- 探秘Tomcat（一）
前言:有的时候自己不知道自己是井底之蛙,这并没有什么可怕的,因为你只要蜷缩在方寸之间的井里,无数次的生活轨迹无非最终归结还是一个圆形:但是可怕的是有一天你不得不从井里跳出来生活,需要重新审视井以外的生 ...
- Leetcode分类总结（Greedy）
贪心类题目目前除了正则匹配(Wildcard Matching)(据说其实是DP)那道还没做其他的免费题目都做了,简单做个总结. 贪心的奥义就是每一步都选择当前回合”可见范围“(即可得知的信息)内的最 ...
- React系列文章：Webpack模块组织关系
现代前端开发离不开打包工具,以Webpack为代表的打包工具已经成为日常开发必备之利器,拿React技术栈为例,我们ES6形式的源代码,需要经过Webpack和Babel处理,才能生成发布版文件,在浏 ...
- BZOJ4261 : 建设游乐场
将图黑白染色,每个点拆成两个点,分别表示水平和竖直方向,再增加一个点以控制流量,那么每个格子都需要找两个方向去连接. $S$到每个黑点的控制点连边,流量$2$,费用$0$: 控制点向两个方向的点各连两 ...
- Kaggle Titanic solution 纯规则学习
其实就是把train.csv拿出来看了看,找了找规律,调了调参数而已. 找到如下规律: 1.男的容易死,女的容易活 2.一等舱活,三等舱死 3.老人死,小孩活 4.兄弟姐妹多者死 5.票价高的活 6. ...
- spring源码分析系列 (1) spring拓展接口BeanFactoryPostProcessor、BeanDefinitionRegistryPostProcessor
更多文章点击--spring源码分析系列 主要分析内容: 一.BeanFactoryPostProcessor.BeanDefinitionRegistryPostProcessor简述与demo示例 ...
- 9.4 dubbo异步调用原理
9.1 客户端发起请求源码.9.2 服务端接收请求消息并发送响应消息源码.9.3 客户端接收响应信息(异步转同步的实现) 分析了dubbo同步调用的源码,现在来看一下dubbo异步调用. 一.使用方式 ...