Search code examples
jqueryzoomingmodernizrfallback

jquery determine if css zoom is available in browser


$(button).click(function(){
    if (Modernizr.zoom()) $('body').animate({ zoom: '200%'; }, 1000);
    else $('body').alternative();
});

As you can see above … I want to zoom in into my page on click.

By the way: Is it good to use 'zoom' (css)? I'm not sure because I did not find any good description for 'zoom' (css). Or is it better to use 'scale' (css) to animate?

Main Question: Is there any way to detect if the browser supports this css-'zoom' (or whatever) feature? I'm using Modernizr, but within Modernizr there is nothing to detect if 'zoom' is available.


Solution

  • OK. I found out, that using the css zoom-property is not good, because it only works in IE and some newer versions of "real" browsers. AND if i have a layout with percent-values it doesn't zoom except i also change the value of the width or height, which is not nice.

    BUT it does work with the css3 scale-property! and therefore i found the Modernizr.csstransforms() feature detection (for js)!

    So … that's it!