Search code examples
javascripthtmlcssresizesize

How to keep a <div> constant in size as the user zooms in and out on the page?


Is there an html / css / javascipt way to maintain a <div> at a constant size in the face of the user's zooming the page in and out? That is, using control-plus to increase text size and control-minus to reduce it.

EDIT: The kicker, I guess, is that I want the content of the <div> to stay the same size, too.

Thanks!

EDIT: My goal was (and is) to keep an AdSense <div> from expanding so much as to obscure a lot of the real content on the page. But come to find out (thank you @thirtydot) there's really no good way to do this. The answer, for me (thank you @Neal!): give the <div> overflow:scroll so as to sacrifice its content rather than the content I'm trying to show.


Solution

  • There is no good way (read: reliable) to do this. Sorry.

    What you're asking for basically boils down to detecting the zoom level of the browser, and there's a great answer here (confirming just how difficult this is):

    As stated in that answer, there is a "kinda" cross-browser crazy way involving the use of Flash, but there are downsides:

    • It uses Flash.
    • It's not reliable if the user loads your page already zoomed in.
    • It uses Flash. Yes, this is so bad that I said it twice. Think of all those iPhones/iPads.

    Anyway, it's here:
    http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/