Displaying Retina Images
A basic script to replace the normal images with the iPad 3 optimized image(i.e. high resolution images), all you need to do is just keep the high resolution image with a “retina” extension. For example, imageABC.png becomes imageABCretina.png. Read here why you should do so.
<script type="text/javascript">
$(document).ready(function() {
var pixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
images = document.getElementsByTagName("img"), num = images.length;
if (navigator.userAgent.indexOf('iPad') >= 0 && pixelRatio >= 2 && ((screen.width == 768 && screen.height == 1024) || (screen.width == 1024 && screen.height == 768))) {
for (i = 0; i <= num - 1; i++) {
var temp = images[i].attributes['src'].value,
src = temp.substr(0, temp.lastIndexOf('.')) + 'retina' + temp.substr(temp.lastIndexOf('.'));
images[i].src = src;
}
}
});
</script>
I am checking for user agent, screen width and pixelRatio since the screen width will double check that the device is an iPad and the pixel ratio will make sure its a 3rd Generation iPad, if we just use the pixelRatio, then this snippet will also apply for new iPhones(as they also have pixel ratio of 2). The screen width tends to remain 768 no matter what is the orientation(unlike other tablets in which they interchange if tilted), but I have still checked for other orientation if Apple ever decides to change how screen width and height are reported based on the device’s orientation.
iPad 3 Specific Stylesheet Similarly, we can also use iPad 3 specific stylesheet with a little help of
jQuery. Do notice here that earlier iPad(s) had 1024 x 768 resolutions, thus media queries specific to them will also work with the new iPad(since the iPad 3 also returns the same resolution only despite of being 2048 x 1536). This shows how you can even detect the landscape and portrait modes on the iPad(s).
<script type="text/javascript">
$(document).ready(function() {
var pixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
if (navigator.userAgent.indexOf('iPad') >= 0 && pixelRatio >= 2 && ((screen.width == 768 && screen.height == 1024) || (screen.width == 1024 && screen.height == 768))) {
$('head').append('<link rel="stylesheet" href="iPad3.css" type="text/css" />');
}
});
</script>
Another way to achieve it using basic HTML is:
<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iPad3.css" />