Question

完整的缩放应该在我们的控制之下。

我尝试使用元标记

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

但是没用。有什么帮助吗？我认为可以使用javascript完成。

Answer 1

tl; dr：

function stopWheelZoom(event) {
  if (event.ctrlKey == true) {
    event.preventDefault();
  }
}
function stopKeyZoom(event) {
  if (event.ctrlKey && [48,61,96,107,109,187,189].indexOf(event.keyCode) > -1) {
    event.preventDefault();
  }
}
document.addEventListener("keydown", stopKeyZoom);
document.addEventListener('mousewheel', stopWheelZoom);
document.addEventListener('DOMMouseScroll', stopWheelZoom);

请注意，这仅会禁用典型的缩放控件，而不会禁用缩放功能，因为页面脚本无法访问缩放功能（该功能高于页面级别）。

还请注意，它不会禁用pinch zoom gestures。现代浏览器的大多数移动版本都允许在实际页面上方的图层上进行缩放。一旦检测到捏缩放手势，它将由浏览器处理，并且页面无法访问它。

完整答案：

非标准 CSS缩放

...是非标准的，不在标准轨道上。 Ref。

它起源于Internet Explorer，并且在Safari中也有an implementation。可以在github上找到非正式的实施草案。

此功能的核心是允许用户更改布局的呈现方式，牺牲像素完美的图形的可读性（放大）或整个页面的鸟瞰图（缩小）。

实施很大程度上取决于浏览器制造商的自由度，这为不同的浏览器如何应用它之间留有巨大的矛盾余地，并且，总而言之，Web开发人员在设计内容时不应考虑它。

内容应设计为缩放级别100%。在任何其他缩放级别上的结果均不能保证。

最重要的是，浏览器制造商可能会（并且大多数会选择）以页面本身不可用的级别应用缩放，并且没有跨浏览器的API来确定当前的缩放级别。

话虽如此，但没有任何保证，下面的代码段似乎无法通过 Ctrl + + ， Ctrl + < kbd>-和 Ctrl + 0 ，以及 Ctrl +鼠标滚轮事件。

function stopWheelZoom(event) {
  if (event.ctrlKey == true) {
    event.preventDefault();
    if (event.wheelDelta > 0) {
      console.log('Up');
    } else {
      console.log('Down');
    }
  }
}
function stopKeyZoom(event) {
  if (event.ctrlKey) {
   console.log(event.keyCode);
    if (event.keyCode == 107 || event.keyCode == 187 || event.keyCode == 61) {
      event.preventDefault();
      console.log('Up')
    }
    if (event.keyCode == 109 || event.keyCode == 189) {
      event.preventDefault();
      console.log('Down')
    }
    if (event.keyCode == 96 || event.keyCode == 48) {
      event.preventDefault();
      console.log('Reset');
    }
  }
}
document.addEventListener("keydown", stopKeyZoom);
document.addEventListener('mousewheel', stopWheelZoom);
document.addEventListener('DOMMouseScroll', stopWheelZoom);

test

我已经在Linux上为Chrome编写了它。我将在其他浏览器中对其进行测试，看看是否需要调整/例外。 ~~AFAIK，Mozilla在页面级别上方更改缩放，并且无法在其中停止 Ctrl + +/- 组合~~。

还请注意，您需要单击代码段<iframe>以获得焦点，并使脚本正常工作。为了进行更好的测试，我建议您在网页中而不是在<iframe>内部进行测试。

一个相当重要的注意事项是该脚本不会阻止CSS缩放工作。它只是禁用了通常的控件。如果用户更改缩放组合键，则此脚本不会阻止缩放。从技术上讲，这不是跨浏览器可能的，因为如上所述，无法通过页面脚本确定当前浏览器的缩放级别，也无法禁用或阻止更改页面缩放级别的实际脚本。

另一种非常可怕的方法是确定缩放级别（当前在Opera或Safari中无法实现），并设置<body>的{{1}}和width属性以抵消这种影响。窗口的transform: scale(n)事件，该事件在用户缩放时触发。我个人认为它是如此错误，以至于我甚至都没有考虑为其提供脚本。

Answer 2

尝试一下

$(window).bind('mousewheel DOMMouseScroll', function(event) {
if(event.ctrlKey == true)
{
    event.preventDefault();
    if(event.originalEvent.detail > 0) {
         console.log('Down');
     }else {
         console.log('Up');
     }
}

}）;

如何防止Chrome，Firefox和Safari浏览器缩放？

2 个答案:

tl; dr：

完整答案：