Target iPhone and iPad with CSS3 Media Queries
When designing a website, it’s always a good idea to test on as many different platforms, devices, and browsers as possible. These days, pimping your websites for the iPhone and iPad is an important step in the design process. Especially on the iPad, sites tend to look about 20% cooler than on desktop browsers, so you definitely want to take the time to fine-tune the details. And when dealing with iDevices, it’s often necessary to deliver some custom CSS to make everything just right.
Want to apply CSS styles to the iPad and iPhone? Here is the plug-n-play, copy-&-paste code that actually works.
As you may have heard, I’ve been super-busy behind the scenes building an Angry-Birds fan site, of all things. The site is looking great so far, but needed some tweaking to appear slick on the iPad and iPhone. After testing a number of different solutions, here is what I found that actually works..
Target iPad & iPhone with separate CSS files
If you want to apply styles to the iPad and iPhone using external stylesheets, put this code in your <head>:
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="http://example.com/iPhone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="http://example.com/iPad.css" />
<!--<![endif]-->For this to work, you need to edit the path to each of the stylesheets. Then add some styles exclusively for the iPhone (first <link>) or the iPad (second <link>).
How does it work? Well, we first exclude IE by wrapping the links in a simple conditional comment. Then we’re using some CSS3 media queries to target each device specifically. Safari on the iPhone responds to a max-device-width of 480px, and Safari on the iPad seems to respond best when both min-device-width and max-device-width are used in the query. Together, these media queries apply styles in either portrait or landscape orientation.
Target iPad & iPhone from within your existing stylesheet
Using external stylesheets to target iStuff works great, but the extra HTTP requests can reduce performance. To avoid this, we can apply iPad/iPhone-specific CSS using our existing stylesheet. You know, the same one that we’re using for Firefox, Opera, and other desktop browsers. After much experimentation and testing, here is what I found that works:
/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}
/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}Just place that code into your stylesheet and change the declaration blocks to something more useful. Unfortunately, combining these two media queries won’t work:
/* == iPad/iPhone [portrait + landscape] == */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px),
@media only screen and (max-device-width: 480px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}As always, comments, questions, and suggestions are welcome! :)
37 responses to “Target iPhone and iPad with CSS3 Media Queries”
Very cool, thanks so much for sharing this code. Is this to say that we could simply include these styles in our existing WordPress theme stylesheet and our sites would be formatted for iPhone or iPad?
Would doing this exclude the need for plugins like WP Touch?
Jeff wouldn’t it be easier to check the user-agent string for iPhone/iPad? Then you can spoof your browser to do testing as not everyone has an iPhone/iPad to test on.
@Adam: Yes, the media queries could be used in your theme stylesheet to apply any styles to iPad/iPhone Safari browser. With CSS, we can change site appearance, but not structure. You can customize things using CSS, but for major structural overhaul, it’s way easier to go with WPtouch (or whatever).
@Skye: For development sites, sure – by any means necessary. But for production sites, delivering targeted styles in existing CSS files is going to save HTTP requests and help optimize performance. So once you finalize your iCSS, just add it to your main stylesheet using the code above.
I’ve created an Apple Stylesheet with iPhone specifc styling:
http://pastebin.com/Y2BsXig4
It’s clear and simple and targets older versions of Apple products.
Enjoy!
How does “
only screen and (min-device-width: 768px) and (max-device-width: 1024px)” only target the iPad? Won’t it target any device whose screen width is between 768px and 1024px (including normal browser windows)?@Jeff: Thanks for the clarification and the additional link, it’s most appreciated.
For the last code example to work could you just miss out the second ‘@media’? So it reads ‘@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 480px) { }’? I have not used css3 media queries before, and may have misread this page http://www.w3.org/TR/css3-mediaqueries/ (example VI).
@Deano: Thank you for sharing! :)
@Daniel15: Never said it “only” targets anything – of course these media queries will also match any device that meets the criteria. For the iPad, we’re getting pretty specific with the “
and” qualifier, so the matching device (not browser) would have to have the same screen dimensions as the iPad. I’m sure there are such devices, but I have yet to hear of one.@Adam: Anytime – happy to help! :)
@Andrew: Perhaps so.. I will test this tonight and update the post if positive results are achieved. Thanks for pointing it out.
great
i never thought media attribute would be so helpful to filter the browser before
Hi there!
The media query for iPhone is valid for iPhone Geneartions 1-3, but will it work with Generation4 handsets, too? AFAIK the retina display has a physical resolution of 960×640, but how does it behave concerning the media queries?
At the moment I don’t have access to a Gen4 Device, any body out there to report on this issue?
Kind regards, mtness.
To be clear, can I just drop the code you’ve mentioned into my existing stylesheet and be good-to-go?
You said something about useful declarations but I didn’t really get that…. :-(
@Avi D: yep just drop it in
Here’s the latest version of my sheet that is a great starting point:
http://pastebin.com/VYMeKqtV