CSS Zoom in Browsers

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 entry was posted in CSS CheatSheets and tagged , . Bookmark the permalink.

20 Responses to CSS Zoom in Browsers

  1. Gerry says:

    YMMD with that awnser! TX

  2. K.Sya says:

    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.

  3. Michael says:

    Not equivalent! Delete this page!

  4. Tom says:

    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 :)

  5. Dracco says:

    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.

  6. Peter Seychell says:

    this is wrong. scale does scale percentage values, zoom does not. this only works with absolute sizes in pixels….

  7. pike says:

    transform:scale(2) is the css3 standard. zoom is a legacy explorer<9 feature, avoid it.

    • Ryan says:

      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

      • pike says:

        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…

  8. Mirco says:

    Thank you for the tipp!

  9. Anees says:

    very helpful thank you so much

  10. Nguyen Vu says:

    how about a “zoom” function on a camera??
    Ex: div {
    zoom: 200%
    }

  11. LOLROBOT says:

    NICE ANSWER< THNAKS!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">

Current ye@r *