CSS Zoom property, supported in IE 5.5+, Opera, and Safari 4, and Chrome.
Firefox is the only major browser that does not support zoom, but you could use -moz-transform since Firefox 3.5.
div.zoom {
zoom: 2; /* all browsers */
-moz-transform: scale(2); /* Firefox */
}Example:
test zoom 2
test zoom 1
This blog dedicated to resolving CSS / HTML layout problems. Plus there is a need to write down some of my experiences for future use. Hope this blog helps somebody.
YMMD with that awnser! TX
thanks buddy.
the -moz-transfor:scale is not equals css zoom , I’m trying to create a report viewer for my web application but I have some problems with -moz-transform:scale such as that , the behavior between moz-transform and zoom in a div with overflow:auto isn’t one thing.
Not equivalent! Delete this page!
I added example, it works.
nooo, im afraid he as referring to the fact that
zoom: 2; /* all browsers */
-moz-transform: scale(2); /* Firefox */
do not create consistent results cross browser,
i.e
zoom: 2; /* all browsers */does not look the same as -moz-transform: scale(2); /* Firefox */ does on firefox. therefore they are not equivalent, cannot be subsituted for each other and this post is misleading
hmm, I’m comparing my examples in all browsers, looks the same
IE9, FF, Chrome gives same result.
doesnt works in IE8.
Im using Opera 11.61 on Linux Mint, both of the above look the same and these are not zoomed. Checked it with Firefox, only test zoom 2 is bigger, same with Chromium.
yes, on windows opera it also doesn’t work
So your solution does not support Opera, as it says in topic description ^^.
this is wrong. scale does scale percentage values, zoom does not. this only works with absolute sizes in pixels….
That is correct.
transform:scale(2) is the css3 standard. zoom is a legacy explorer<9 feature, avoid it.
Actually pike, that is incorrect. Zoom is a part of the CSS3 standard. See here: http://dev.w3.org/csswg/css-device-adapt/#the-lsquozoomrsquo-descriptor
I stand corrected ! As the link says (thanks), it is a @viewport descriptor. This is different from the traditional IE zoom. I still dont think it can be properly used in “div.zoom” as mentioned above, even if it works in most browsers. it should be used to zoom the whole ‘screen’ (starting at 0,0).
css:transform is quite something else, it is used to transform separate elements (starting at a given transform-origin). so for the above usage, i would still use that if available…