我通过监听键盘快捷键CTRL + / CTRL -并添加
e.preventDefault()
等内容已经成功实现了它。但是这不能防止从浏览器的缩放菜单更改缩放。我尝试过:
- 使用CSS:
zoom: reset;
它适用于Chrome(请参见这个页面以查看一个有效的示例),但在Firefox上根本不起作用。
- 在各种问题/答案中,我还发现了
```
```
但这似乎只适用于移动设备。如何在各种浏览器中防止缩放?
e.preventDefault()
等内容已经成功实现了它。但是这不能防止从浏览器的缩放菜单更改缩放。zoom: reset;
它适用于Chrome(请参见这个页面以查看一个有效的示例),但在Firefox上根本不起作用。
- 在各种问题/答案中,我还发现了
```
```
但这似乎只适用于移动设备。我并没有找到一个“权威”的答案,也就是说,没有浏览器开发者明确的声明。然而,我找到的所有类似问题的答案(比如这个或那个)都表明同样的事情——浏览器的缩放功能存在是为了用户的利益,一些浏览器(比如Firefox)根本不允许你作为网站创建者禁用这个选项。
这份文档或许可以解释为什么在移动设备上允许作者禁用缩放是个好主意,但在台式机上不是。
简而言之,如果你知道移动设备的自动缩放会导致显示不当,你可能需要阻止它。 在台式机上,没有自动缩放,所以当用户访问你的网站时,他们会看到它应该呈现的样子。 如果他们决定需要缩放页面,没有必要阻止他们这样做。
关于您列出的解决方案:
zoom
是一个非标准属性,不受 Firefox 支持, 而且<meta name="viewport">
仅涉及 布局视口 和 可视视口 不是同一件事情, 即移动设备。使用此代码,您可以在浏览器中禁用使用 Ctrl + + 或 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/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>
<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>
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
。
如果你不太关心,上述内容是你的简单方法。如果你很在意,那么你可以尝试使用detect-zoom脚本,我是在寻找解决Safari和Opera问题时发现的。
现在,你可以获取缩放级别,然后抵消你的缩放,使其不做任何事情。所以,如果我强制浏览器缩放为50%,你只需要设置为200%。因此,没有变化。当然,这可能会更加复杂,你需要存储上一次的浏览器缩放、新的浏览器缩放,并进行一些稍微复杂的数学计算,但基于你已经拥有的内容,这应该很容易。
另一个想法可能是只监听大小调整事件,然后根据新的可见大小进行计算,但如果窗口只是被调整大小,可能会引起问题。我认为上述方案可能是你最好的选择,如果需要,可以设置一个回退alert
来提醒用户不要缩放。
detect-zoom
脚本在新版本的 Chrome 和 Firefox 中不起作用。但正如所述,Safari 和 Opera 得到支持。 - stackErr223%
缩放状态,并且用户将其更改为150%
缩放,则会读取该值,并在代码中转到1.486%
缩放(如果我算得对的话:223/150
)。如果用户再次更改,则您将假装150%
是100%
,并根据此进行计算。像您提供的页面一样,纯文本,因此无法使用该方法。此外,您不希望阻止该类型页面的缩放。 - David我更新了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();
}
});
});
这个解决方案适用于桌面浏览器,跨平台(操作系统/Windows)。
document.addEventListener(
"wheel",
function touchHandler(e) {
if (e.ctrlKey) {
e.preventDefault();
}
}, { passive: false } );
<meta name='viewport' content='width=device-width,initial-scale=1,user-scalable=no, maximum-scale=1.0, shrink-to-fit=no'>
通过键盘防止浏览器缩放与上面的许多答案相同。
window.addEventListener('keydown', function (e) {
if ((e.ctrlKey || e.metaKey) && (e.which === 61 || e.which === 107 || e.which === 173 || e.which === 109 || e.which === 187 || e.which === 189)) {
e.preventDefault();
}
}, false);
但是现代浏览器中通过鼠标滚轮禁止缩放的方法有所不同。 Chrome的新策略需要你显式地使用passive = false。
{passive: false}
const handleWheel = function(e) {
if(e.ctrlKey || e.metaKey)
e.preventDefault();
};
window.addEventListener("wheel", handleWheel, {passive: false});
但是我们无法防止从浏览器菜单点击缩放。
$(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();
}
});
})
$("body").css({
"-moz-transform":"scale(1)",
"-webkit-transform":"scale(1)",
"-o-transform":"scale(1)",
"-ms-transform":"scale(1)"
});
我使用这种代码来设置或重新设置比例尺。
body { transform: scale(1); }
可能会起作用。 - rfornal
window.onkeydown
和e.preventDefault()
)。 我的问题是:如何防止浏览器菜单(查看>缩放设置等)中的缩放。 - Basjzoom
应用相反的效果,但比我想象的要困难得多。(使用http://tombigel.github.io/detect-zoom/) - chdltest