Detecting iPad 3 For Specific Stylesheet and Images

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" />

Special thanks to Sean Smith for debugging and fixing code.

  • Unfortunately, this will not work because the new iPad reports a resolution of 1024×768 when referencing screen.width and screen.height through JavaScript, just like the first two generations of the iPad. There appears to be no way to distinguish one generation of the iPad from another with JavaScript. I have the new iPad and can confirm this.

    <h4>AUTHOR EDIT: Fixed</h4>

  • I wanted to compose a simple message so as

    to thank you for all of the superb facts you are giving at this website.

    My prolonged internet research has now been paid with useful knowledge to write about with my companions.

    I 'd state that that most of us website visitors actually are unquestionably endowed to be in a very good site with many lovely individuals with beneficial things. I feel extremely privileged to have used your webpages and look forward to really more fabulous moments reading here. Thanks again for everything.

  • Pingback: Detecting iPad 3 For Specific Stylesheet and Images | Pritesh Gupta | Buy Fast & Easy()