2012-12-27 48 views
3

可能重复:
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; 
    } 
} 

我开发一个web应用程序和所有的UI元素将是不如果用户放大/缩小,则以正确的顺序排列。那么,有什么办法可以阻止它吗?我想到了一些办法,但这有可能吗?

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

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

感谢

+3

这个问题已经在这里一个相关的问题得到回答: http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all -modern-browsers –

+0

感谢您的帮助 – user782104

+0

但是可以使用第一种方法吗? – user782104

回答

8
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+")" 
     }); 


    }); 
+2

这个答案与这个问题有关吗?它会放大/缩小双击? – MJoraid

+1

@Joraid,双击无所谓。这对于调整页面缩放非常重要。这只是一个例子。这将是一个解决方案。 –