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">
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)))  {
var temp = images[i].attributes['src'].value,
src = temp.substr(0,temp.lastIndexOf('.')) + 'retina' + temp.substr(temp.lastIndexOf('.'));
images[i].src = src;

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" />');

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.

  • ミネトンカ 正規店
  • Wholesale Football Jerseys

    magnificent points altogether, you simply gained a new reader. What would you recommend about your post that you made a few days ago? Any positive?

  • Gucci Clutches

    Thank you for your site post. Brown and I have already been saving to get a new guide on this matter and your writing has made us all to save the money. Your ideas really solved all our questions. In fact, in excess of what we had recognized ahead of the time we discovered your superb blog. I no longer have doubts plus a troubled mind because you really attended to each of our needs above. Thanks

  • Toronto Maple Leafs Hockey Jersey

    Hi! Do you know if they make any plugins to help with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good success. If you know of any please share. Many thanks!

  • air jordan 1 85

    "Das ist beeindruckend und wichtige Arbeit", sagt Matthew Johnson, ein Psychiater auch an der Johns-Hopkins-Universit盲t, die jetzt l盲uft eine kleine Versuch, der die Wirksamkeit von Psilocybin zu Nikotinsucht zu behandeln. "Obwohl diese Meta-Analyse nicht die Notwendigkeit, den Ansatz in den neuen, gut gestaltet und strengen klinischen Studien testen zu ersetzen, bringt es etwas mehr Muskeln hinter der Interpretation, die die 盲ltere Literatur zeigt Hinweise, dass psychedelische Therapie k枚nnte wirklich Sucht zu helfen."

  • electricians

    I visited multiple blogs except the audio quality for audio songs existing at this website is really excellent.|

  • タトラス m65

    タトラス m65

  • louis vuitton handbags

    Let me start by saying wonderful publish. Im not confident if it has been talked about, but when using Chrome I can in no way get the entire web site to load with out refreshing many times. Could just be my computer. Thanks.

  • Cheap Green Bay Packers Jerseys

    Thanks for a excellent advice! I just come to your blog and really like the information. I expect to be learning your blogposts in the future. Excellent write-up, really useful. I believe plenty of visitors will locate this very useful.Keep write-up in coming future too!

  • Pingback: steven avery()

  • Pingback: resources practice()

  • Pingback: replacement windows cost()

  • Pingback: Home Page()

  • Pingback: interior design uae()

  • Pingback: Continue advices()

  • Pingback: our website()

  • Pingback: interior design uae()

  • Pingback: Cross Country Movers()

  • Pingback: find your lost pet in india()

  • dcee

    marvel champions hacker online for free gold and iso 8

  • Pingback: naples real estate market()

  • nevalex

    Retina images are no use when front glass is broken ) Personally I haven’t noticed any difference in resolution between Ipad 3-4


  • Pingback:

  • Pingback: Handy Reparatur Heilbronn()

  • Pingback: HOFFMANN()

  • Pingback: Raynor Massage()