Simulate browser scaling in CSS

Question

Well, I tried two scaling methods that I know of:

zoom:2; 

and...

 transform:scale(2); 

However, although they do work (sort of), there is one major drawback: the JavaScript mouse events are ed.

I can’t figure out how to get the coordinates of the mouse, as if the page were not scaled.

In addition, I must add body{width:50%} to make sure that it does not result in huge horizontal scrolling.

On the other hand, if I simply enlarge the page using my own browser scaling, the result will be perfect. Everything looks right, mouse events work as they should, the body retains its actual width, etc.

Is there a way to make this natural browser enlargement work in CSS? If not, what kind of JavaScript should I use to ensure that the mouse coordinates are correct?

Answer 1

I do not believe that there is a way to programmatically control my own browser scaling. Instead, you can use Javascript to control the scaling of your document using CSS, tracking the current zoom level and then filtering the coordinates of the mouse with the current zoom level as a modifier. For example, if you zoom in 50% by multiplying the coordinates of the mouse by 0.5, the synchronization will be preserved.

Note that the zoom property has been patented by MSIE and has not yet been universally accepted, so it may not work in all browsers: http://dev.w3.org/csswg/css-device-adapt/#the-lsquozoomrsquo-descriptor