防止缩放跨浏览器
对于一个类似地图的工具，我想禁用浏览器缩放function 。 （我知道这通常是一个坏主意，但对于某些特定的网站，这是必要的）。
我通过听取键盘快捷键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">但这似乎只适用于手机。
如何防止跨浏览器缩放？
我还没有真正find一个“权威”的答案，这意味着浏览器开发人员的明确声明。 然而，我发现的类似问题的所有答案（比如这个或那一个 ）都表明了同样的事情 – 浏览器的缩放function是为了用户的利益而存在的，一些浏览器（如Firefox）根本不允许你一个网站的创造者，把这个选项从他们身上移开。
本文档可能会阐明为什么允许作者禁用缩放可能是移动设备上的一个好主意，但在台式机上则不然。
简而言之，如果您知道计算出的自动缩放比例不合适，您可能需要先禁止移动设备自动缩放网站。 在桌面上，没有自动缩放function，所以当用户访问您的网站时，他们完全按照它的意图来看待它。 如果他们决定他们需要放大页面，没有任何理由让你阻止他们这样做。
至于你列出的解决scheme：
-
zoom是Firefox不支持的非标准属性 -
<meta name="viewport">只与布局视口和可视视口不同的设备有关，即移动设备。
您可以通过按Ctrl +或Ctrl-或使用Ctrl键+鼠标滚轮来禁用在浏览器中放大此代码的上或下。
$(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/underscor Hey // 61 Plus key +/= key }); $(window).bind('mousewheel DOMMouseScroll', function (event) { if (event.ctrlKey == true) { event.preventDefault(); } });
我想你可以做的是，听取浏览器缩放事件（ctrl +“+”），然后检查window.devicePixelRatio。
然后，相应地，在body元素上应用HTML5比例转换以相同的比例缩小。 所以，基本上你不能阻止这个function，但是你可以用相同的幅度来施加负面影响。
POC代码：
<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之后的东西是基于我注意到的东西，因为我在乱搞。 我知道的第一个工作至less是每一个的最新版本。 请注意，Safari和Opera都具有devicePixelRatio ，但都不会改变。 它总是只有1 。
如果你不那么在意，以上是简单的方法。 如果你这样做，那么你可以尝试一下检测缩放脚本，这是我在寻找Safari和Opera解决scheme时遇到的。
所以你现在可以做的是获得缩放级别，然后将你的缩放偏移到它什么都不做的地方。 所以如果我强迫我的浏览器缩放50％，你只需要200％。 因此，没有改变。 当然，它会更复杂一点，你必须存储最后一次的浏览器缩放，新的浏览器缩放，以及稍微复杂的math计算，但是基于你已有的东西，这应该是一件轻而易举的事情。
另一个想法可能是侦听一个resize的事件，并基于新的可见大小来计算，但是如果窗口刚刚resize，这可能会导致问题。 我认为上述将是你最好的select，也许有一个后备alert ，警告用户不要放大，如果有必要。
我更新了代码Vijay代码：
$(document).ready(function(){ var keyCodes = [61, 107, 173, 109, 187, 189]; $(document).keydown(function(event) { if (event.ctrlKey==true && (keyCodes.indexOf(event.which) != -1)) { alert('disabling zooming'); event.preventDefault(); } }); $(window).bind('mousewheel DOMMouseScroll', function (event) { if (event.ctrlKey == true) { alert('disabling zooming'); event.preventDefault(); } });
}）;
该解决scheme是针对桌面浏览器的跨平台（OS / Win）。
$(document).ready(function () { $(document).keydown(function (event) { if (event.ctrlKey == true && (event.which == '107' || event.which == '109' || event.which == '187' || event.which == '189')) { event.preventDefault(); } }); $(window).bind('mousewheel DOMMouseScroll', function (event) { if (event.ctrlKey == true) { event.preventDefault(); } }); })
很简单：
function load(){ document.body.addEventListener("wheel", zoomShortcut); //add the event } function zoomShortcut(e){ if(e.ctrlKey){ //[ctrl] pressed? event.preventDefault(); //prevent zoom if(e.deltaY<0){ //scrolling up? //do something.. return false; } if(e.deltaY>0){ //scrolling down? //do something.. return false; } } }
p { display: block; background-color: #eeeeee; height: 100px; }
<!DOCTYPE html> <html> <head> <title>Mousewheel control!</title> </head> <body onload="load()"> <p>If your Mouse is in this Box, you can't zoom.</p> </body> </html>
你有没有尝试过 …
$("body").css({ "-moz-transform":"scale(1)", "-webkit-transform":"scale(1)", "-o-transform":"scale(1)", "-ms-transform":"scale(1)" });
我已经使用这种types的代码来设置或重新设置比例。
