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

众所周知：移动端页面禁止用户缩放界面只需加上即可，但是pc端确实比较麻烦，用户可以通过如下几种方式来缩放：

windows：

ctrl + +/-

ctrl + 滚轮

浏览器菜单栏

mac：

cammond + +/-

浏览器菜单栏

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

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

img

test测试test测试test测试test测试

/**

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

* 众所周知：移动端页面禁止用户缩放界面只需要在 即可，但是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);

此次收获：

键盘事件的修饰键(ctrlKey、metaKey)、每个按键的编号

DOMContentLoaded(dom结构渲染完成) 和 Loaded(页面中所有的资源包括图片都渲染完成) 事件的区别

addEventListener 和 DOMContentLoaded 支持 >= ie9，基本无需考虑兼容性

js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小

众所周知:移动端页面禁止用户缩放界面只需加上即可,但 ...

PC端浏览器定位

第一: PC端浏览器定位(纯前端)浏览器定位 :这里用了两种 ,一种是Html5自带的方法 另一种是引用了百度api  ,百度api 的使用有三种:1 浏览器定位2 ip定位3 SDK辅助定位引用百度 ...

在thinkPHP3.2.3框架下实现手机和PC端浏览器的切换

查看thinkphp版本号方法 打开文件“根目录\ThinkPHP\ThinkPHP.php”下的文件ThinkPHP.php,在22--23行可以看到版本信息THINK_VERSION,如下图: 说 ...

移动端&PC端CSS样式兼容代码

CSS样式兼容代码 1.禁止选中复制文本 *{ user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-us ...

Fiddler4工具配置及调试手机和PC端浏览器

Fiddler最大的用处: 模拟请求.修改请求.手机应用调试 Fiddler最新版本 下载地址: http://www.telerik.com/download/fiddler Fiddler 想要监 ...

浏览器控制台js代码与后台不同步

原因:浏览器会缓存js 如果是将js代码直接通过

window.close(); 关闭浏览器窗口js代码的分析总结

序号 关闭代码 需要确认 无任何作用 无需确认 测试 1 window.close() IE7 firefox,chrome,safari Opera Close 2 window.opener=nu ...

window.close(); 关闭浏览器窗口js代码

序号 关闭代码 需要确认 无任何作用 无需确认 测试 1 window.close() IE7 firefox,chrome,safari Opera Close 2 window.opener=nu ...

IE浏览器部分js代码不生效的问题

[小小坑记录] 问题描述:IE浏览器写好功能代码之后,在调试模式下程序能正常运行.不开启调试模式正常访问时js部分功能代码不生效. 原因:在测试时用了console对象在控制台输出一一些内容,而IE的 ...

随机推荐

Android开发系列(十八)：自己定义控件样式在drawable目录下的XML实现

在Android开发的过程中,我们常常须要对控件的样式做一下改变,能够通过用添加背景图片的方式进行改变,可是背景图片放多了肯定会使得APK文件变的非常大. 我们能够用自己定义属性shape来实现. s ...

使用CountDownLatch和CyclicBarrier处理并发线程

闲话不说,首先看一段代码: { IValueCallback remoteCallback = new IValueCallback.Stub() {

#0 scrapy爬虫学习中遇到的坑记录

python 基础学习中对于scrapy的使用遇到了一些问题. 首先进行的是对Amazon.cn的检索结果页进行爬取,很顺利,无碍. 下一个目标是对baidu的搜索结果进行爬取 1,反爬虫 1.1 我 ...

MySQL InnoDB 逻辑存储结构

MySQL InnoDB 逻辑存储结构 从InnoDB存储引擎的逻辑结构看,所有数据都被逻辑地存放在一个空间内,称为表空间,而表空间由段(sengment).区(extent).页(page)组成.p ...

Linux命令学习之路——内容剪切:cut

使用者:所有角色 用法:cut [ -bcdfn ] [ --complement ] filename 作用:截取文件中的部分字段用于展示或存储到新文件中 应用场景: 1.内容展示 : 截取一个或多 ...

[TestNG] Eclipse/STS中两种安装TestNG的方法

Two Ways To Install TestNG in Eclipse/STS Today I install the newest Sprint Tool Suite and want to i ...

day23 模块02

核能来袭--模块 2 1.nametuple() 2.os模块 3.sys模块(重点) 4.序列化 (四个函数) 5.pickle(重点) 6.json(重点中的重点) 1.nametuple() 命 ...

玩转X-CTR100 l STM32F4 l FPU单精度浮点性能测试

我造轮子,你造车,创客一起造起来!塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ]      本文介绍X-CTR100控制器如何开启ST ...

最短路 spfa+STL

与迪杰斯特拉相同的是spfa也是用来求单源点的最短路径问题,但是,当问题中的边是有向负边的时候,迪杰斯特拉就无能为力了, 而且给我的感觉是spfa如何结合STL来用的话代码比迪杰斯特拉的还要短一点,只 ...

RewriteCond和13个mod_rewrite应用举例Apache伪静态

1．给子域名加www标记 RewriteCond %{HTTP_HOST} ^([a-z.]+)?example\.com$ [NC] RewriteCond %{HTTP_HOST} !^www\. ...