Detect page scaling

Question

I'm writing a web page with Javascript. I have to somehow work with my DIV layer properties refer to page scaling.

How can I do this? You can find the example at apple page. Try to scale it and look at top menu.

Answer 1

You should use EM's for all you dimensions, so all you elements will scale (when font-size only scaling is enabled). So you can measure the font-size on elements to know it the text-zoom was modified or not.

There is no way to know if the page was zoomed by the browser or not (as i wrote, only if the text zoom is used)

here is a workaroud: it will only work if the font-size is zoomed http://jsfiddle.net/gGdAq/4/

Basically if the width in Pixel of the element your interested in, is not the base font size * the width in em the page was zoomed.

Maybe this question helps: Catch browser's "zoom" event in JavaScript

Answer 2

EDIT: I thought scaling meant re-sizing the window. You meant zooming in and out, my bad.

---

The top menu on the apple site is a fixed with and will not scale with the re-sizing of the browser window. If you wanted to have that feature, you would have to assign a:

div {
    width: %; //percentage value you want
    min-width: px; //the minimum pixel value you want
}

This way it expands and decreases with the page width, yet maintains a min width for readability

Also, using em as a font-size will help keep the text size dynamic as well.

Answer 3

You will encounter this (or similar) behavior on virtually any site. Havent tested it in any other browsers but here is my answer to the same question concerning firefox.