views:

1211

answers:

5
  1. How can I detect page zoom level in all modern browsers? While this thread tells how to do it in IE7 and IE8, I can't find good solution for FF, Safari and Chrome. For FF one of the suggested solution

  2. FF stores page zoom level for future. So on first page load would I be able to get zoom level? Somewhere I read it works if you're changing zoom level on that page after its loaded.

  3. Is there a way to trap 'zoom' event?

I need this because some of my calculations are based on no of pixels and they get changed on Zoom.

Thanks.

Modified sample given by tfl. This would alert different height based on zoom level.

  <html>
     <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
     <title></title>
     </head>
    <body>
     <div id="xy" style="border:1px solid #f00; width:100px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis. 
     </div>
     <div>
      <button onclick="alert($('#xy').height());">Show</button>
     </div>
    </body>
    </html>
A: 

I need this because some of my calculations are based on no of pixels and they get changed on Zoom.

This approach is flawed. Even if you'd know that I'm on zoom level 100%, you still cannot tell credibly how many pixels I have - e.g. if I run my browser full-screen (I don't). I could have Javascript disabled or partially-enabled ... I could even try to surf your site with w3m or similar.

Try to not make assumptions on the nature of the hardware and software a user utilizes.

Martin Hohenberg
@martin: that's true but the nature of our solution requires no of pixels. All we want to know the dimension of a DIV in pixels. Do you think there is no credible way to do it?
understack
A: 

why not use

var width = document.getElementByID("#your div").width
var height = document.getElementByID("#your div").height

zooming should not change dimensions...

tfl
@tfl: zooming changes these dimensions.
understack
A: 

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)

tfl
@tfl: it's because you've fixed the width in inline-style. I've modified your sample to show my case (posted inside original question).
understack
now i understand (and can see it) - and have no solution...
tfl
+1  A: 

Your calculations are still based on a number of CSS pixels. They're just a different size on the screen now. That's the point of full page zoom.

What would you want to happen on a browser on a 192dpi device which therefore normally displayed four device pixels for each pixel in an image? At 50% zoom this device now displays one image pixel in one device pixel.

Neil
@Neil: how can I get 'CSS pixels' dimensions?
understack
CSS defaults to points, but you can of course specify pixels by using the px dimension modifier. As for element properties retrieved in JavaScript, these should already be in CSS pixels. So if you specify the width of a <div> to be 100px, then that's what you'll get back from JavaScript, whatever the zoom level may be.
Neil
+1  A: 

I wrote a little JavaScript using flash to detect the current zoom level of any modern browser. Maybe this helps you out.

http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/

Best rergards, Sebastian

sebastian
I admit, that flash hack is the only solution, great work!
Dobiatowski