对于类似地图的工具，我想禁用浏览器缩放功能。（我知道这通常是一个坏主意，但对于某些特定网站，它是必需的）。
我通过听键盘快捷键CTRL +/CTRL -和添加e.preventDefault()等成功做到了。
但这并不能阻止从浏览器的缩放菜单更改缩放。
我试过：
使用 CSS： zoom: reset; 它适用于 Chrome（有关工作示例，请参阅此页面）但在 Firefox 上根本不起作用。
在各种问题/答案中，我还发现
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
但这似乎仅适用于移动设备。
如何防止跨浏览器缩放？
我还没有真正找到“权威”的答案，这意味着浏览器开发人员的明确声明。然而，我发现的类似问题的所有答案（比如这个或那个）都表明了同样的事情 - 浏览器的缩放功能是为了用户的利益而存在的，而某些浏览器（比如 Firefox）根本不允许你，因为网站创建者，从他们那里拿走这个选项。
本文档可能会阐明为什么允许作者禁用缩放在移动设备上可能是一个好主意，但在台式机上则不然。
简而言之，您可能需要阻止移动设备最初自动缩放您的网站，如果您知道它们计算出的自动缩放是不合适的。在台式机上，没有自动缩放功能，因此当用户访问您的网站时，他们看到的内容完全符合预期。如果他们随后决定需要缩放页面，则没有充分的理由让您阻止他们这样做。
至于您列出的解决方案：
zoom是Firefox 不支持的非标准属性，并且<meta name="viewport">只用在哪些设备有关布局视和视觉视口是不一样的东西，即移动设备。将此代码与Ctrl++或Ctrl+-或Ctrl+mouse wheel up或Ctrl+mouse wheel down一起使用时，您可以禁用浏览器放大功能。
$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189' ) ) {
event.preventDefault();
}
// 107 Num Key +
// 109 Num Key -
// 173 Min Key hyphen/underscore key
// 61 Plus key +/= key
});
$(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey == true) {
event.preventDefault();
}
});
在此处查看演示：JSFiddle。
将以下内容插入到您的 HTML 中：
对于手机：在“< head>...</head>”标签之间插入。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
对于跨浏览器的桌面：在开始 '<body>...' 标签之后插入。
<script>
document.body.addEventListener("wheel", e=>{
if(e.ctrlKey)
e.preventDefault();//prevent zoom
});
</script>
我认为您可以做的是，收听浏览器缩放事件（ctrl + "+"），然后检查 window.devicePixelRatio。
然后相应地，对 body 元素应用 HTML5 缩放转换以按相同的比例缩小。因此，基本上您无法阻止该功能，但您可以应用相同量级的负面影响。
验证码：
<body style="position: absolute;margin: 0px;">
<div style="width: 300px; height: 200px; border: 1px solid black;">
Something is written here
</div>
<script>
var keyIncrease = [17, 61];
var keyDecrease = [17, 173];
var keyDefault = [17, 48];
var listenMultiKeypress = function(keys, callback){
var keyOn = [];
for(var i=0; i<keys.length; i++){
keyOn[i] = false;
}
addEventListener('keydown', function(e){
var keyCode = e.which;
console.log(keyCode);
var idx = keys.indexOf(keyCode);
if(idx!=-1){
keyOn[idx] = true;
}
console.log(keyOn);
for(var i=0; i<keyOn.length; i++){
if(!keyOn[i]){
return;
}
}
setTimeout(callback, 100);
});
addEventListener('keyup', function(e){
var keyCode = e.which;
var idx = keys.indexOf(keyCode);
if(idx!=-1){
keyOn[idx] = false;
}
console.log(keyOn);
});
};
var previousScale = 1;
var previousDevicePixelRatio;
var neutralizeZoom = function(){
//alert('caught');
var scale = 1/window.devicePixelRatio;
document.body.style.transform = 'scale('+(1/previousScale)+')';
document.body.style.transform = 'scale('+scale+')';
var widthDiff = parseInt(getComputedStyle(window.document.body).width)*(scale-1);
var heightDiff = parseInt(getComputedStyle(window.document.body).height)*(scale-1);
document.body.style.left = widthDiff/2 + 'px';
document.body.style.top = heightDiff/2 + 'px';
previousScale = scale;
};
listenMultiKeypress(keyIncrease, neutralizeZoom);
listenMultiKeypress(keyDecrease, neutralizeZoom);
listenMultiKeypress(keyDefault, neutralizeZoom);
neutralizeZoom();
</script>
</body>
</html>
所以，正如已经提到的，这真的是不可能的。但是，有一些方法您仍然可以聪明地使用它。
五个主要浏览器中的三个都允许您查看浏览器的缩放级别，此外，如果浏览器被缩放，则会触发window.onresize事件。
IE: event.view.devicePixelRatio OR window.view.devicePixelRatio
Chrome: event.currentTarget.devicePixelRatio OR window.devicePixelRatio
Firefox: event.originalTarget.devicePixelRatio OR window.devicePixelRatio
Safari: /* Not possible */
Opera: /* Not possible */
我认为 OR 之后的东西是基于我在胡闹时注意到的东西。我知道的第一个至少在每个版本的最新版本中工作。请注意，Safari 和 Opera 都有devicePixelRatio，但都不会改变。它总是只是1。
如果您不太在意，以上是您的简单方法。如果你这样做了，那么你可以尝试检测缩放脚本，这是我在寻找 Safari 和 Opera 的解决方案时遇到的。
所以你现在可以做的是获得缩放级别，然后将缩放偏移到它不做任何事情的地方。因此，如果我强制浏览器缩放 50%，您只需缩放到 200%。因此，没有变化。当然，它会更复杂一些，您必须存储上次浏览器缩放比例、新浏览器缩放比例，并进行一些稍微复杂的数学运算，但根据您已有的内容，这应该是轻而易举的。
另一个想法可能是只侦听调整大小事件，并根据新的可见大小进行计算，但如果只是调整窗口大小，这可能会导致问题。我认为以上将是你最好的选择，也许有后备alert警告用户在必要时不要缩放。