Plugin Sale! Save 15% on pro plugins with discount code: NEWYEAR2021
Web Dev + WordPress + Security

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="" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="" />

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! :)

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
WP Themes In Depth: Build and sell awesome WordPress themes.

37 responses to “Target iPhone and iPad with CSS3 Media Queries”

  1. Adam W. Warner 2010/10/20 11:55 am

    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?

  2. 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.

  3. Jeff Starr
    Jeff Starr 2010/10/20 1:38 pm

    @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.

  4. I’ve created an Apple Stylesheet with iPhone specifc styling:

    It’s clear and simple and targets older versions of Apple products.


  5. 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)?

  6. Adam W. Warner 2010/10/21 4:06 am

    @Jeff: Thanks for the clarification and the additional link, it’s most appreciated.

  7. 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 (example VI).

  8. Jeff Starr

    @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.

  9. great
    i never thought media attribute would be so helpful to filter the browser before

  10. 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.

  11. 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…. :-(

  12. @Avi D: yep just drop it in

    Here’s the latest version of my sheet that is a great starting point:

Comments are closed for this post. Something to add? Let me know.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
WP Themes In Depth: Deep dive into WP theme development.
Simply Static is my go-to plugin for generating static HTML versions of WordPress sites. Works flawlessly.
Note to self: never, ever, ever buy any CD or DVD from eBay. Every single time the discs are scratched, damaged, missing, fake, or worse. Never again you clowns.
Find out if a plugin works with the latest version of WordPress @
Going through all of my data, deleting all the chaff. Going for less than 500 GB total data storage.
Finally deleted all the cool unused placeholder Twitter accounts that I signed up for years ago. I will never use them.
After several years with Dashlane, I've moved on to a simpler, better solution.
After 10+ years, finally moved the last of my sites away from Media Temple.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.