Simulate browser zoom in CSS -

well, i've tried 2 methods of zooming know of:

zoom:2; 

and...

transform:scale(2); 

however, while work (sort of), there 1 major flaw: javascript mouse events ----ed.

i can't seem figure out how mouse coordinates if page weren't scaled.

additionally, have add body{width:50%} make sure doesn't result in huge horizontal scroll.

on other hand, if zoom page using native browser zoom, result perfect. appears correctly, mouse events work should, body keeps actual width , on.

is there way natural browser zoom work in css? if not, kind of javascript should use ensure mouse coordinates "scaled" correctly?

i don't believe there way programmatically control native browser zoom. might instead use javascript control scaling of document css while keeping track of current zoom level, filtering mouse coordinates current zoom level modifier. example, if @ 50% zoom, multiplying mouse coordinates 0.5 keep things in sync.

note zoom property proprietary msie , not yet universally adopted, may not work in browsers: http://dev.w3.org/csswg/css-device-adapt/#the-lsquozoomrsquo-descriptor