Special CSS3 Scaling for Android version less than 2.3. Following on from link Making Adobe edge HTML5 Animations mobile responsive.

 //special scaling for andriod version less than 2.3
            var ua = navigator.userAgent;
            if( ua.indexOf("Android") >= 0 )
                var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8));
                if (androidversion < 2.3)
                    // alert('andriod < 2.3');
                    var pixelScaleRatio = 1 / window.devicePixelRatio; //Andriod 2.2 devicePixelRatio = 1.5
                    scale = scale * pixelScaleRatio;

                    var $meta = $('meta[name=viewport]'),
                        content = $meta.attr('content');

                    $meta.attr('content',content+', target-densitydpi=320');

Scale uses this plugin: https://github.com/zachstronaut/jquery-animate-css-rotate-scale

Meta Tag densitydpi

densitydpi is used for scaling the pixels to their actual size. A pixel is not a pixel in some devices and Android < 2.3 somehow thinks pixels are 1.5 times their actual size... so this is where densitydpi comes into play to correct that. See densitydpi doco for more on this.

<meta name="viewport" content="target-densitydpi=high-dpi"/>

Full Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=high-dpi"/>
Sam Deering Sam Deering
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

No Reader comments

Stay ahead of the game Exclusive content for developers and digital experts Go Premium