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" />
(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
Post a Comment