使用 Javascript/Jquery 在桌面 Web 浏览器中禁用页面缩放

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14050841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 15:34:14  来源:igfitidea点击:

Disable zooming of the page in desktop web browsers using Javascript/Jquery

javascriptjqueryscreen

提问by user782104

Possible Duplicate:
How to detect page zoom level in all modern browsers?

可能的重复:
如何在所有现代浏览器中检测页面缩放级别?

var obj=document.body;  // obj=element for example body
// bind mousewheel event on the mouseWheel function
if(obj.addEventListener)
{
    obj.addEventListener('DOMMouseScroll',mouseWheel,false);
    obj.addEventListener("mousewheel",mouseWheel,false);
}
else obj.onmousewheel=mouseWheel;

function mouseWheel(e)
{
    // disabling
    e=e?e:window.event;
    if(e.ctrlKey)
    {
        if(e.preventDefault) e.preventDefault();
        else e.returnValue=false;
        return false;
    }
}

I am developing a web app and all ui element will be not in a correct order if user zoom in / zoom out . So, are there any way to prevent it? I have think of some way to do it but is it possible ?

我正在开发一个 Web 应用程序,如果用户放大/缩小,所有 ui 元素的顺序都将不正确。那么,有没有什么办法可以预防呢?我已经想到了一些方法来做到这一点,但有可能吗?

1) Get the screen resolution of the user. When the window size is change (either width or height), return the window width/height to screen width /height.

1) 获取用户的屏幕分辨率。当窗口大小发生变化(宽度或高度)时,将窗口宽度/高度返回到屏幕宽度/高度。

2) bind the mouse scroll event or keyboard event to nothing. (Refer to above demo code) , but what if the user click on the browser and select zoom in ?

2) 将鼠标滚动事件或键盘事件绑定到空。(参考上面的演示代码),但是如果用户点击浏览器并选择放大呢?

Thanks

谢谢

回答by ?brahim Alt?noluk

    var zoomlevel=1;

    $("body").dblclick(function(ev) {
        zoomlevel = zoomlevel == 1 ? 2 : 1;



        $(this).css({
            "-moz-transform":"scale("+zoomlevel+")",
            "-webkit-transform":"scale("+zoomlevel+")",
            "-o-transform":"scale("+zoomlevel+")",
            "-ms-transform":"scale("+zoomlevel+")"
        });


    });