Get Retina Display & Add Dynamic Retina CSS & Replace Images

/******************************Get DevicePixelRatio ********************************/
(function (window) {
window.getDevicePixelRatio = function () {
var ratio = 1;
// To account for zoom, change to use deviceXDPI instead of systemXDPI
if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI) {
// Only allow for values > 1
ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
}
else if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
}
return ratio;
};
})(this);

/*********************************Get CSS & Images ********************************/


var devicePixelRatio = window.getDevicePixelRatio();
            var path = $("#device1").attr('href');
            var fileExt = path.split('.').shift();
            var stylesheet = fileExt + '_2x.css';
            console.log(path)
            console.log(fileExt)
            console.log(stylesheet)
            //alert(path);
            //alert(fileExt);
            //alert(lastfile);
            if (devicePixelRatio == 2) {
                $('html').addClass('retina')
                $('head').append('<link rel="stylesheet" id="device" href="#" type="text/css" />');
                //$("#device").attr("href", "css/styles_2x.css");
                $("#device").attr({
                    href: (stylesheet)
                });
                var img_to_replace = jQuery('img.replace-2x').get();
                //console.log(img_to_replace)
                for (var i = 0, l = img_to_replace.length; i < l; i++) {
                    var src = img_to_replace[i].src;
                    //alert(src)
                    //console.log(src)
                    src = src.replace(/\.(png|jpg|gif)+$/i, '@2x.$1');
                    //alert(src)
                    img_to_replace[i].src = src;
                    //console.log(img_to_replace)
                };
            };

/************************************HTML***********************************/

<img src="img/Desert.jpg"
                 width="200" height="200"
                 class="replace-2x" />

Comments

Popular posts from this blog

Scroll After Fixed Navigation

Bootstrap CSS Customize with SCSS CSS

Best way to prevent page scrolling on drag (mobile)