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.

Select Code
<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).

Select Code
<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:

Select Code
<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.

3,080 thoughts on “Detecting iPad 3 For Specific Stylesheet and Images

  1. Pingback: food
  2. Pingback: education
  3. After I initially left a comment I seem to have clicked on the -Notify me when new comments are added- checkbox and now each time a comment is added I receive four emails with the same comment. Perhaps there is an easy method you can remove me from that service? Thanks!|

  4. Pingback: high quality
  5. Pingback: verkehrsunfall
  6. Pingback: Beautiful Salon
  7. Right here is the perfect site for anyone who would like to find out about this topic. You understand a whole lot its almost hard to argue with you (not that I personally would want to…HaHa). You definitely put a fresh spin on a subject that has been written about for ages. Great stuff, just great!|

  8. Pingback: paintwork repairs
  9. Pingback: food
  10. Pingback: turhost
  11. Pingback: XXX porn videos
  12. Pingback: Kareena Kapoor
  13. Hello! This is kind of off topic but I need some help from an established blog. Is it difficult to set up your own blog? I’m not very techincal but I can figure things out pretty fast. I’m thinking about creating my own but I’m not sure where to begin. Do you have any points or suggestions? Thank you|

  14. Pingback: Clicking Here
  15. Pingback: home
  16. Pingback: home

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>