Facebook Twitter Gplus LinkedIn RSS
 
 
Home » Blog » CSS for iPhone, iPad, and Retina Displays

CSS for iPhone, iPad, and Retina Displays

Published on March 25th, 2012

As any web developer has learned over the years, you are always stuck coding for different platforms. Back in the day, it was making sure your website worked on both Netscape and Internet Explorer. In today’s mobile arena, we are faced with even more options. I’m not even talking about the Android verses iPhone either. In just the Apple world we have to keep track of the iPod Touch, iPhone, and the iPad, the latter two with Retina display options that further complicate things.

In CSS3, this is actually pretty easy to do with media queries. If you use CSS, which you should if you call yourself a web developer, then the following should be rather intuitive.

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
} 

Just make sure for Retina screens that you are “squishing” the larger image into the smaller CSS container. If you don’t know what I mean, be sure to read yesterday’s blog entry on HTML5 Canvas and Retina Displays.

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.

 

7 Responses to “CSS for iPhone, iPad, and Retina Displays”

  1. Will the Retina section work for the new iPad as well?

    • Yes sir!!

      See it in action in Demotivate HD, which comes out this week. It is rather impressive. I’ll post a before/after in the announcement.

  2. My brother suggested I would possibly like this web site. He was once entirely right. This put up actually made my day. You cann’t consider just how so much time I had spent for this information! Thanks!

  3. This is a very confusing topic. These values only work if you do not set the viewport width=device-width. If you do set the viewport as described, you’ll have a media width of 320px. lumping you into the rest of the smartphone categories…

    When not setting the viewport, what is your strategy to deal with font sizes? -webkit-text-size-adjust: 200%; ??

    • I use the standard viewport message and have zero issues with fonts. In fact, fonts are pretty much handled by the Retina device, as can be seen when you visit non-retina sites.

      What issue do you seem to be having?

  4. Hi

    im currently working on a webapp project where we need to use the feature of resizing websites for smarthones and tablets, i found this article/code, and was wondering whats surpose to be written where /* iphone portrait*/ is written.
    Im currently a student at Kea-multimedia-design in denmark.

    Philip.

Leave a Reply

© 2012 zSprawl's zApps