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.

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

  1. Pingback: snip russia
  2. Pingback: free proxy
  3. I just like the helpful information you provide on your articles. I will bookmark your weblog and test again right here frequently. I am slightly sure I will learn plenty of new stuff right here! Best of luck for the following!|

  4. Pingback: watch free anime
  5. ちなみにこの写真のレコード盤は、バスキア本人が所有していたと考えられる超超超貴重なものを、数年前に某レコード屋さんで撮影したもの!※掲載許可を頂いています)また、このジャケットのデザインを2次使用した商品は、世の中にほとんど無いそう。
    ドレス ブランド ランキング

  6. Pingback: free daily proxies
  7. Hello There. I discovered your blog the usage of msn. That is a really smartly written article. I will be sure to bookmark it and return to learn more of your useful info. Thank you for the post. I’ll certainly return.|

  8. Chef David Holben’s holiday menu features an 8 ounce filet and 8 ounce lobster tail for $79 with additional steak toppings ($6), Champagne beurre blanc ($6) and a Godiva chocolate mousse cake ($12). Side dishes include spinach supreme, lobster macaroni and cheese, potatoes au gratin and sauted mushrooms ($7 $16). Feb. The specialty menu will also be offered on Feb. in addition to the restaurant’s regular menu. 5251 Spring Valley Road, Dallas. Theprix fixedinner will be offered for four consecutive days alongsidethe restaurant’sa la carte menu. Feb. at the Ritz Carlton, 2121 McKinney Ave., Dallas.

  9. Pingback: code de la route
  10. Heya i’m for the first time here. I came across this board and I find It truly useful & it helped me out much. I hope to give something back and help others like you helped me.|

  11. Pingback: Castello Estense
  12. Pingback: clickbank
  13. Pingback: streaming tv shows

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>