Bas*_*asj 61 html javascript css cross-browser
对于类似地图的工具,我想禁用浏览器缩放功能.(我知道这通常是一个坏主意,但对于某些特定的网站,它是必要的).
我通过听键盘快捷键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">
但这似乎仅适用于移动设备.
如何防止缩放跨浏览器？
Vij*_*vai 37
您可以通过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();
}
});
在这里查看演示http://jsfiddle.net/VijayDhanvai/4m3z3knd/
hon*_*n2a 32
我还没有找到一个"权威"的答案,这意味着浏览器开发人员的明确声明.但是,我发现的类似问题的所有答案(比如这一个或那个)都表明了同样的事情 - 浏览器的缩放功能是为了用户的利益而存在的,而某些浏览器(如Firefox)根本不允许你这样做,网站创建者,将此选项远离他们.
本文档可能会阐明为什么允许作者禁用缩放可能是移动设备上的一个好主意,而不是在台式机上.
简而言之,您可能需要阻止移动设备最初自动缩放您的网站,如果您知道他们的计算自动缩放将不合适.在桌面上,没有自动缩放功能,因此当用户访问您的网站时,他们会看到它完全符合要查看的内容.如果他们然后决定他们需要缩放页面,那么没有充分的理由让你阻止他们这样做.
至于您列出的解决方案:
zoom是一个非标准的财产不Firefox支持,并<meta name="viewport">与设备上只关注布局视和视觉视口是不一样的东西,即移动设备.我认为你可以做的是,听一下浏览器缩放事件(ctrl +"+"),然后检查window.devicePixelRatio.
然后,在body元素上应用HTML5缩放变换,以相同的比例缩小.所以,基本上你不能阻止功能,但你可以应用相同幅度的负面效果.
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>
将以下内容插入到您的 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>
所以,正如已经提到的那样,这真的是不可能的.但是,有一些方法你仍然可以聪明一点.
五种主要浏览器中的三种都允许您查看浏览器的缩放级别,此外,如果浏览器被缩放,则会触发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.
如果你不那么在乎,上面是你的简单方法.如果你这样做,那么你可以尝试使用detect-zoom脚本,这是我在寻找Safari和Opera的解决方案时遇到的.
所以你现在可以做的是获得缩放级别,然后将缩放偏移到它什么都不做的地方.因此,如果我强制我的浏览器进行50%缩放,那么你只需要200%.因此,没有变化.当然它会有点复杂,你必须存储最后一个浏览器缩放,新的浏览器缩放,并做一些稍微复杂的数学,但根据你已经拥有的,这应该是轻而易举的.
另一个想法可能是只监听resize事件,并根据新的可见大小进行计算,但如果窗口刚刚调整大小,则可能会导致问题.我认为上面的内容将是你最好的选择,可能会有一个后退alert警告用户不要在必要时进行缩放.
| 归档时间： |
|
| 查看次数： |
65590 次 |
| 最近记录： |