发表新帖
发表新帖

How to detect page zoom level in all modern browsers?

后端 未结
关注
28 1830
慢半拍i
慢半拍i 2020-11-21 05:27

  1. How can I detect the page zoom level in all modern browsers? While this thread tells how to do it in IE7 and IE8, I can\'t find a good cross-browser solution.

相关标签:
28条回答
  • 旧巷少年郎
    2020-11-21 06:09

    You can use the Visual Viewport API:

    window.visualViewport.scale;

    It is standard and works both on desktop and mobile: browser support.

    0 讨论(0)
  • 你的背包
    2020-11-21 06:09

    What i came up with is :

    1) Make a position:fixed <div> with width:100% (id=zoomdiv)

    2) when the page loads :

    zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

    And it worked for me for ctrl+ and ctrl- zooms.

    or i can add the line to a $(window).onresize() event to get the active zoom level

    Code:

    <script>
    var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;

    $(window).resize(function(){
        zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
        alert(zoom);    
    });
</script>
<body>
    <div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>

    P.S. : this is my first post, pardon any mistakes

    0 讨论(0)
  • 迷失自我
    2020-11-21 06:10

    Didn't test this for IE, but if you make an element elem with

    min-width: 100%

    then 

    window.document.width / elem.clientWidth

    will give you your browser zoom level (including the document.body.style.zoom factor).

    0 讨论(0)
  • 一生所求
    2020-11-21 06:10

    here it does not change!:

    <html>
 <head>
  <title></title>
 </head>
<body>
 <div id="xy" style="width:400px;">
  foobar
 </div>
 <div>
  <button onclick="alert(document.getElementById('xy').style.width);">Show</button>
 </div>
</body>
</html>

    create a simple html file, click on the button. regardless of what zoom level: it will show you the width of 400px (at least with firefox and ie8)

    0 讨论(0)
  • 执念已碎
    2020-11-21 06:11

    I have a solution for this as of Jan 2016. Tested working in Chrome, Firefox and MS Edge browsers.

    The principle is as follows. Collect 2 MouseEvent points that are far apart. Each mouse event comes with screen and document coordinates. Measure the distance between the 2 points in both coordinate systems. Although there are variable fixed offsets between the coordinate systems due to the browser furniture, the distance between the points should be identical if the page is not zoomed. The reason for specifying "far apart" (I put this as 12 pixels) is so that small zoom changes (e.g. 90% or 110%) are detectable.

    Reference: https://developer.mozilla.org/en/docs/Web/Events/mousemove

    Steps:

    1. Add a mouse move listener

      window.addEventListener("mousemove", function(event) {
    // handle event
});

    2. Capture 4 measurements from mouse events:

      event.clientX, event.clientY, event.screenX, event.screenY

    3. Measure the distance d_c between the 2 points in the client system

    4. Measure the distance d_s between the 2 points in the screen system

    5. If d_c != d_s then zoom is applied. The difference between the two tells you the amount of zoom.

    N.B. Only do the distance calculations rarely, e.g. when you can sample a new mouse event that's far from the previous one.

    Limitations: Assumes user will move the mouse at least a little, and zoom is unknowable until this time.

    0 讨论(0)
  • 旧时难觅i
    2020-11-21 06:13

    This is question was posted like ages back, but today when i was looking for the same answer "How to detect zoom in and out event", i couldn't find one answer that would fit all the browsers.

    As on now : For Firefox/Chrome/IE8 and IE9 , the zoom in and out fires a window.resize event. This can be captured using:

    $(window).resize(function() {
//YOUR CODE.
});
    0 讨论(0)
 看不清?
提交回复
热议问题