【问题标题】:Disable zooming of the page in desktop web browsers using Javascript/Jquery [duplicate]使用 Javascript/Jquery 在桌面 Web 浏览器中禁用页面缩放 [重复]
【发布时间】:2012-12-12 14:48:17
【问题描述】:

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

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

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

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

谢谢

【问题讨论】:

  • 此问题已在此处的相关问题中得到解答:stackoverflow.com/questions/1713771/…
  • 但是可以使用第一种方法吗?
  • 即使您中断了所有可以让用户缩放的组合键,浏览器 UI 中仍然会有“缩放”按钮。这些不能被禁用。
  • 有点失望,为什么在重复引用的询问、标题和回答如此糟糕的情况下标记重复的版主不改进参考,使其成为解决“重复”的好方法.至少可以修复引用副本的标题以匹配其内容。

标签: javascript jquery screen


【解决方案1】:
    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+")"
        });


    });

【讨论】:

  • 这个答案与问题有什么关系?双击会放大/缩小?
  • @Joraid,双击没关系。这对于能够调整页面缩放很重要。这只是一个例子。这将是一个解决方案。
猜你喜欢
  • 1970-01-01
  • 2016-05-14
  • 2014-05-31
  • 2014-08-06
  • 2012-12-02
  • 2010-10-31
  • 2017-07-10
  • 2014-06-12
  • 2016-09-16
相关资源
最近更新 更多