Simulate browser zoom in CSS

Question

Well, I've tried the two methods of zooming that I know of:

zoom:2;

and...

transform:scale(2);

However, while they do work (sort of), there is one major flaw: JavaScript mouse events are ----ed.

I can't seem to figure out how to get the mouse coordinates as if the page weren't scaled.

Additionally, I have to add body{width:50%} to make sure that it doesn't result in a huge horizontal scroll.

On the other hand, if I just zoom the page using the native browser zoom, the result is perfect. Everything appears correctly, mouse events work as they should, the body keeps its actual width and so on.

Is there any way to get this natural browser zoom to work in CSS? If not, what kind of JavaScript should I use to ensure mouse coordinates are "scaled" correctly?

Answer 1

I don't believe there is a way to programmatically control the native browser zoom. What you might do instead is use Javascript to control the scaling of your document with CSS while keeping track of the current zoom level, then filtering your mouse coordinates with the current zoom level as a modifier. For example, if you are at 50% zoom, multiplying your mouse coordinates by 0.5 would keep things in sync.

Note that the zoom property was proprietary to MSIE and is not yet universally adopted, so it may not work in all browsers: http://dev.w3.org/csswg/css-device-adapt/#the-lsquozoomrsquo-descriptor