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”
These are fantastic articles but I can only use them to get myself into trouble. I’m finding it difficult to locate a CSS guru (no luck on elance) who can remake my site for mobile browsers. Any suggestions on where else I should look?
Andrew
I have similar solution “Bulletproof CSS3 media queries” http://www.vcarrer.com/2010/07/bulletproof-css3-media-queries.html
@mtness: I haven’t tested yet on anything
960×640, but the first rule should target those devices as well. If anyone knows more about this, please share with us. Thanks!@Avi D: Yes these styles work fine when included directly in your existing stylesheet. Just replace the example declarations (the
marginstuff) with whatever CSS you would like to use.@Andrew W.: If you’re running WordPress, there are several great plugins that mobilize your site with a few clicks. Specifically, look at WPtouch – an excellent plugin and highly recommended.
@Vladimir Carrer: Nice! Thanks for sharing :)
Wow Jeff Starr, you really are on the bleeding edge of Web Design.
Not really Craig, but I do enjoy sharing what I’ve learned with others. I have to admit though, “the bleeding edge of Web Design” does sound wicked smart.
Maybe someday, huh?
Hi Jeff, Thanks for sharing, One question since I have neither those devices so I can’t know what is not being displayed right. But I’m thinking for example this could come handy for example I have pictures bigger than the ipad and iphone screen width, does this mean that I can provide diferent image files of different widths to suit each device in the stylesheets? or are you just talking about tweaking layout and code differences to the computer browser version?
Sorry for my lousy english.
Hi Danilo,
The
@mediaqueries target matching devices (such as iPhone/iPad), but they don’t apply any styles of their own. So to prevent images from breaking layout, we need to apply that property specifically:@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {img { max-width: 768px; }}But as you say, this only resizes the images to fit the screen, it won’t change the actual file size.
I hope this helps!
that’s great
but, is there by any chance attribute from can detect user agent?
such as
or something like that…
i think it will gonna be easier for developing CSS :-)
oops, sorry i mean
can attribute from style detect user agent?
such as style
user-agent="iPad"I wish! But no, CSS can’t do this (yet). You can use PHP or JavaScript to to do the job.
Great article.
I’ve made a test rig for CSS3 media queries that might interest you or anyone that wants to experiment with them. Source is on github as well.
http://swervo.tumblr.com/post/1448434311/testrigformediaqueries
I haven’t included iPad as it starts getting a bit big but it could be extended easily enough.
This sort of thing kind of annoys me as it implies all these ‘cool’ CSS3 goodies are only applicable to Apple products.
You can use
@mediaqueries to target all mobile devices (even if they don’t understand them), no matter how old or unstylish they are, which is surely more useful than catering solely for iPhones and iPads.