Javascript 防止跨浏览器缩放
对于类似地图的工具，我想禁用浏览器缩放功能。（我知道这通常是个坏主意，但对于某些特定的网站来说，这是必要的） 我通过听键盘快捷键CTRL+/CTRL-并添加Javascript 防止跨浏览器缩放,javascript,html,css,cross-browser,Javascript,Html,Css,Cross Browser,对于类似地图的工具，我想禁用浏览器缩放功能。（我知道这通常是个坏主意，但对于某些特定的网站来说，这是必要的） 我通过听键盘快捷键CTRL+/CTRL-并添加e.preventDefault（）等，成功地完成了这项任务。 但这并不妨碍从浏览器的“缩放”菜单更改缩放 我试过： 使用CSS:缩放：重置它适用于Chrome（请参阅），但在Firefox上根本不起作用 在各种问题/答案中，我还发现 但这似乎只适用于移动设备 如何防止跨浏览器缩放？我还没有找到一个“权威”的答案，这意味着浏览器开发人
e.preventDefault（）- 使用CSS:
缩放：重置它适用于Chrome（请参阅），但在Firefox上根本不起作用 - 在各种问题/答案中，我还发现
但这似乎只适用于移动设备
如何防止跨浏览器缩放？我还没有找到一个“权威”的答案，这意味着浏览器开发人员的明确声明。然而，我发现的类似问题的所有答案（如或）都表明了同样的事情——浏览器的缩放功能是为了用户的利益而存在的，而一些浏览器（如Firefox）根本不允许作为网站创建者的你从他们身上拿走这个选项
也许可以解释为什么允许作者禁用缩放功能在移动设备上是个好主意，但在台式机上却不是 简言之，如果您知道移动设备计算的自动缩放不合适，您可能需要防止移动设备最初自动缩放您的网站在台式机上，没有自动缩放功能，因此当用户访问您的网站时，他们会看到与预期完全相同的内容。如果他们决定需要缩放页面，您没有理由阻止他们这样做
至于您列出的解决方案：
是非标准属性，并且zoom
仅涉及布局视口和可视视口所在的设备，即移动设备
<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>
这里写着一些东西
var-keyrease=[17,61]；
var keydrease=[17173]；
var-keyDefault=[17,48]；
var listenMultiKeypress=函数（键，回调）{
var-keyOn=[]；
对于（var i=0；i所以，正如前面提到的，这确实是不可能的。但是，有一些方法你仍然可以对此保持明智
五种主要浏览器中的三种都允许您查看浏览器的缩放级别，此外，如果浏览器被缩放，则会触发事件
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%。因此，没有变化。当然，它会有点复杂，你必须存储上一次浏览器缩放，新的浏览器缩放，并进行一些稍微复杂的数学运算，但基于在你已经拥有的东西上，这应该是轻而易举的事
另一种方法可能是只听一个调整大小事件，然后根据新的可见大小进行计算，但如果窗口刚刚调整大小，这可能会导致问题。我认为上面的方法将是您最好的选择，可能会有一个回退警报，警告用户在必要时不要缩放。您尝试过
$("body").css({
"-moz-transform":"scale(1)",
"-webkit-transform":"scale(1)",
"-o-transform":"scale(1)",
"-ms-transform":"scale(1)"
});
我使用了这种类型的代码来设置或重新设置比例。您可以通过此代码通过Ctrl+或Ctrl-或使用Ctrl键+鼠标滚轮向上或向下禁用浏览器中的缩放
$(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();
}
});
})
$(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();
}
});
检查此处的演示我更新了代码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();
}
});
});
此解决方案是针对桌面浏览器的跨平台（OS/Win）解决方案。它很简单：
函数加载（）{
document.body.addEventListener（“wheel”，zoomShortcut）；//添加事件
}
函数zoomShortcut（e）{
如果（e.ctrlKey）{/[ctrl]按下？
event.preventDefault（）；//防止缩放
如果（e.deltaY0）{//向下滚动？
//做点什么。。
返回false；
}
}
}
p{
显示：块；
背景色：#eeeeee；
高度：100px；
}
鼠标滚轮控制！
如果鼠标在此框中，则无法缩放
在HTML中插入以下内容：
对于手机：在“…”标签之间插入
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
对于跨浏览器的桌面：在开始“…”标记后插入
<script>
document.body.addEventListener("wheel", e=>{
if(e.ctrlKey)
e.preventDefault();//prevent zoom
});
</script>
document.body.addEventListener（“轮子”，e=>{
如果（e.ctrlKey）
e、 preventDefault（）；//防止缩放
});
@Skoua:可以覆盖这些快捷方式。我成功地覆盖了（使用window.onkeydown
和e.preventDefault（）
）。我的问题是：如何防止从浏览器菜单中缩放（视图>缩放设置等）只需聆听“ctrl”和“鼠标滚轮”的组合，大多数用户在按住ctrl键并滚动滚轮的同时进行放大和缩小。对于那些一直到菜单进行放大/缩小的用户，让他们这样做吧：）如果这是在flash上，那将是一个不同的故事。不管怎样，我一直在尝试构建一个脚本来检测浏览器的缩放级别，并使用css使用zoom
应用相反的效果，但这比我想象的要难。（使用）我可以