前端开发禁止用户缩放页面

禁止用户缩放页面分两种情况。

情况一：用户为手机端

<meta name="viewport" 
	content="
		width=device-width,
		initial-scale=1.0,
		minimum-scale=1.0,
		maximum-scale=1.0,
		user-scalable=no" >

使用该标签，你要知道4个名词，手机端在访问网站页面的时候，并不是直接把渲染结果放在手机屏幕上，而是通过一个虚拟的视图窗口，因此诞生了三个视图窗口的概念，layout viewport、visual viewport和ideal viewport它们分别代表了手机端加载网站页面过程中涉及的三个视图窗口，下面我们用他们的首字母来分别简称为l、v、i。还有一个手机端的参数devicePixelRatio下面我们简称d。

l指手机浏览器在加载网站页面时，如果网站未经历任何针对移动端的优化，则虚拟化出来的默认视图窗口，存放整个网站页面的内容，这个视图窗口往往会很大，而它的大小也取决于手机厂商的出厂设置，一般是宽为960px的一个大窗口，大家可以自己尝试一下用手机访问一个没有经过针对移动端优化的测试页面，你会发现加载出来的页面有进图条，是一个本质上比较大的窗口页面。

v表示手机浏览器的可视化区域，通俗理解就是你的屏幕可以用来展示网站内容的哪一片地方的大小。

所以就产生了一个刚需，使得网站开发人员可以为手机端来开发网页，所以就出现了可以通过参数来控制大小的i。

解决了视图窗口后，紧接着又出现了一个问题，现在的手机比电脑屏幕小很多，可是分辨率却往往很大，所以就出现了d这个参数，这个参数指的是网站开发中的1像素，等于手机屏幕中的多少像素，有这个参数的好处就是不同分辨率的手机加载出来的网站元素大小基本是一致的，如果没有这个参数，那不止不同手机之间看到的元素大小可能不一样，还会产生小到看不见的问题，因为你屏幕就不大，但是你的分辨率却很大。当然，这里要特别说明一点，这个参数只用做手机浏览器在访问网站时使用，至于其他的场景怎么在手机上展示，我们不去深究。

无论是l还是v，它们的大小都来自于手机厂商设计，而i的本质更是建立在l上的一个可控窗口，且对我们开发来说，我们一般只关注于它们的宽，而不关注高，因为手机上下滑动浏览，所以它们的高一般不做限制，宽度才是我们要着重注意的，l的宽度，我们可以通过JS代码document.documentElement.clientWidth获取，v宽度我们一般情况下可以用js代码window.innerWidth获取到，这里的一般情况指的是非Android 2, Oprea mini 和 UC 8系统。i的宽度不同的手机设置也不同，除了苹果，苹果官方所有的手机i的宽度都是320像素，如果你身边有一个苹果设备，最好是平板，你打开一个给手机浏览的页面，你会发现苹果的横屏始终展示的是竖屏的宽度，两边是以黑屏补充的，其它手机厂商也有相关的网址，可以去查http://viewportsizes.com/。

我们在为手机端开发页面是，按道理来讲最理想的宽度就是刚好手机屏幕宽度的大小，就是直接取v的宽，但是安卓的横屏和竖屏用的窗口宽度不一样，前面说了只有苹果统一了i的宽是320px。

最重要的一点，大家要知道，以苹果设备为例，这里说的320px是给css开发用的参考，就是说手机在加载的时候，在拿到这个页面服务端的渲染结果后，还会使用d来渲染出最终的结果并打开一个合适的视图窗口，这一点我前面也说了，因为手机屏幕不大，但是分辨率不小，所以要把服务端传回来的渲染页面等比例处理为手机屏幕能够正常展示的大小。这一点主要是让大家分清你在开发页面时设置的宽度大小，并不是手机端最终页面的大小。

知道了上面的名词，下面我们再来说mate-viewport标签各参数是干什么的，它最先是由苹果公司引入的一个技术，接受六个参数。

width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩小或者放大页面，值为"no"或"yes", no 代表不允许，yes代表允许。

当然，上面这件是比较官方的解释，下面给大家简单解释一下。

width用来设置移动端在使用d渲染前，拿到的视图窗口的宽度，因为我们要把宽度设置成i的宽，所以你直接设置成width-device，会自动匹配移动端i宽度，你也可以自己设置一个。

initial-scale设置的是手机端页面刚加载到开始渲染时，对原像素的缩放比例，范围是1到10，1代表不缩小100%展示，也就是说，收到的服务端响应结果里边的东西是多大就以多大为基数经历d的渲染。如果你在页面开发时某个元素设置的宽度是600像素，该标签缩放的值设置成2，那么被d渲染的服务端响应结果就只有300像素了，就是原来的1像素，看成0.5个像素，所以我们一般不动这个值，只保持1，改其他值没有必要，更何况它多数情况下不生效。虽然一般情况下我们除非有特殊的需要不随便该这个参数，就设置为1，但是需要注意一点的是，当它为1时，还有另外一个作用就是和width=width-device一样，之所以如此设计，是因为两个参数在不同的平台说不定哪个能被识别，多数情况下initial-scale是无效的。且当initial-scale有效，同时值是1，而width为一个常数值时，那么在手机端渲染时会在width和i的宽值之间取一个较大宽值生效，除非是UC9浏览器它只会生效i宽值，height也同理。

说了一堆总结就一句话，initial-scale一般不用其他值，用了大概率也白设置，因为它大概率本身就不生效

minimum-scale和maximum-scale的值，可取范围也是1到10，用来控制允许用户缩放的比例，height是我们基本不关注的高。

user-scalable控制是否允许用户自行缩放页面。对于user-scalable要特别说明一下，如果你的三个缩放值都是1.0，user-scalable是没有实际效果的，写不写它都一样，它比较鸡肋，其只是用来控制在你所指定的缩放比例内是否允许用户缩放。

上面这些总结一下就是说，meta name="viewport"标签可以达到用户在浏览网页时，使用ideal viewport视图窗口，并且这个窗口的最小与最大缩放效果就是用户使用设备的可视化大小，也就是缩放比例为1.0，当然我们没有限制高，所以高在理论上是有多少内容就有多大。

最后重要的一点，你实际使用的参数和我上面使用的参数一致时，该标签能够达到的实际效果就是禁止用户缩放，但是手机端存在很多劣质的浏览器，就比如国内安卓系统UI自带的浏览器，它的内核不健全，你如果使用那些浏览器测试页面的话，会发现该标签不能完全被解读，不能达到想要的效果，可以下载一个某度的手机浏览器。

---

情况二：用户为PC端

PC端就没有移动端那么麻烦了，比较直白，直接在不允许缩放的页面，写JS来覆盖所有缩放相关的按钮功能，但是注意PC端禁用缩放这个事任何浏览器都不推荐也不提供支持，所以并没有移动端那样的官方可用技术。

const keyCodeMap = {
    // 91: true, // command
    61: true,
    107: true, // 数字键盘 +
    109: true, // 数字键盘 -
    173: true, // 火狐 - 号
    187: true, // +
    189: true, // -
};
// 覆盖ctrl||command + ‘+’/‘-’
document.onkeydown = function (event) {
    const e = event || window.event;
    const ctrlKey = e.ctrlKey || e.metaKey;
    if (ctrlKey && keyCodeMap[e.keyCode]) {
        e.preventDefault();
    } else if (e.detail) { // Firefox
        event.returnValue = false;
    }
};
// 覆盖鼠标滑动
document.body.addEventListener('wheel', (e) => {
    if (e.ctrlKey) {
        if (e.deltaY < 0) {
            e.preventDefault();
            return false;
        }
        if (e.deltaY > 0) {
            e.preventDefault();
            return false;
        }
    }
}, { passive: false });