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”
Do you really need the IECC to eliminate IE browsers? The Media Query should fail when it hits the “only” keyword in IE just like in non-IE browsers that do not support Media Queries.
Why do I always come across these posts a couple of weeks too late! Great article and now bookmarked for the next mobile build.
Please don’t forget there are devices out there that benefit from device specific targeting, not just iPhones and ipads.
We really don’t need to bring back browser specific targeting in another form, if we can help it.
Still, good tips, thanks for your efforts.
Thanks to your great intro, I was able to reformat my site readily. Now my site looks good in desktop browsers, iPhone and iPad too!
Thanks!
Great! Thanks for this tutorial. I’m trying this out right now and it works so far for me.
One question though. How do you target an iPhone or iPad portrait and landscape separately? In other words I want to have 1 for portrait and 1 for landscape.
Great, I’m assuming it works!, I haven’t got an IPad to test it on, anyone know if there is an Ipad emulator to test it on?
The reason your last example won’t work is because you repeated @media. If you want to do multiple queries, you separate them with commas, but only one @media, like so:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 480px) {// your css}You don’t need to target separately for iPad and other tablets. A regular page (960px width) will fit just fine on a tablet.
This being said, there is just one display left to make a website fluid: smart phones display.
max-device-width: 480pxis doing a perfect job while you keep the fonts in ems, the tags’ width in % and the images with no HTML width and height butmax-width:100%. This is it – your website is mobile.Great article! I have tried it out and working well on iPad and iPhone.
But one issue I faced is the
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)code getting affected on the desktop browsers if the screen resolution set to 1024 x 768. The changes I have made ONLY for iPad and iPhone not for desktop browsers in any resolution. Any idea?I was wondering the same thing. I just chose not to target landscape-mode iPads, because I don’t want PC user with 1024×768 to display the mobile version of the website.
As for your last example “combining these two media queries won’t work:” it’s because you don’t need to repeat @media
@mike, it actually targets devices with that screen size, not IPAD specifically. Thus it would / should affect any tablet that fits into that declaration of @media only screen and (min-device-width: 768px) and (max-device-width: 1024px).
@Time. You can set a computer monitor to match those dimensions that it is targeting. That should at least get in you the ballpark.
Great site!
Is there a way you can choose stylesheet automatically depending on wherefrom you are browsing? I have made a facebook tab that opens an iframe with my blog inside. Facebook has a max width of 810px and the standar layout of my template is way wider. However, included in my template there is an ipad stylesheet that would perfectly. Is there a way for the iframe to open my blog with the ipad stylesheet and when browsing directly on the blog, using the “normal” stylesheet?