Using CSS Media Queries to Style Your iPhone and iPad HTML

By Elisabeth Robson
April 17, 2010 | Comments: 12

In my previous post, I showed how you can use JavaScript to detect orientation and style your iPhone and iPad pages.

As reader Jason Grigsby kindly pointed out, you can also do this purely with CSS Media Queries!

CSS, HTML, XHTML and HTML 5

Visit our CSS & HTML resource center for a full listing of new, events, and products.
I've reworked the file I made for that example to use CSS Media Queries to do just that. I split the iPad style into two files: ipad-portrait.css, showing the upcoming and new content under the news content; and ipad-landscape.css, showing the upcoming and new content to the right of the news content. The behavior of the web page is the same in the previous example, but doesn't require any JavaScript to make it all work. (Caveat: I was not able to get the iPhone simulator to respond to the orientation property in my CSS Media Queries; for this example, it didn't matter, but keep that in mind if you want to load a different style on the iPhone on an orientation change).

Here are the new links, showing the updated CSS Media Queries:


<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

As you can see, I've got three CSS files; one for iPhone, two for iPad and I use the ipad-landscape.css file also for desktop machines with a minimum width of 1025px.

I'm attaching screenshots below showing the results in iPad portrait and landscape, and iPhone.

iPad in landscape orientation:
iPadLandscape.png

iPad in portrait orientation:
iPadPortrait.png

iPhone:
iPhone.png


You might also be interested in:

12 Comments

Thanks for this. Helpful to see the differences and be able to easily target the difference screen sizes. I didn't know about orientation detection.

Sweet! Just what I was looking for.

Could we see the css files as well?

Here you go. The CSS is basically the same for both except for the rules at the bottom.

body {
margin: 0px;
padding: 0px;
font-family: Verdana, sans-serif;
padding-bottom: 10px;
}

#header h1 {
display: none;
}

#header {
width: 100%;
height: 67px;
background: url(http://oreilly.com/images/oreilly/oreilly.gif) no-repeat center top;
border-bottom: 1px solid #303030;
}

#header img {
float: left;
margin: 0px;
height: 60px;
padding-left: 5px;
padding-top: 7px;
}

#news, #upcoming, #new {
margin: 10px;
}

#news ul, #upcoming ul, #new ul {
margin: 0px;
padding: 0px;
}

#news li, #upcoming li, #new li {
list-style-type: none;
}

#news li p, #upcoming li p, #new li p {
padding-left: 15px;
}


/* apply these styles to #upcoming and #new when in landscape mode */
#news {
width: 580px;
padding-right: 20px;
float: left;
}

#upcoming {
margin-left: 600px;
}

Excellent! Just what I was looking for. Thanks! =)

We tested this and are getting a very poor look with this part of the code:

#header img {
float: left;
margin: 0px;
height: 60px;
padding-left: 5px;
padding-top: 7px;

seems the padding is not coming out right on our test pages, any suggestions? (especially left padding seems to blend the header img too much)

Bonnie Smith
COO/Director FXP
http://www.forexpulse.com

I have been looking for some good web design code for css for mobile pages.

Any online examples?
Thanks
Greg

I don't think there are any new apps for the current version of iPhone and Ipad for the Verizon version.
articlebase

Hello , I think one site, where you can buy apple items cheaper. Come and see here : NOTEBOOK

Or , if you like a virtual reality , come and see this :Leonar3Do

Thanks the visit, and bye

GREAT, that just solved one of my problem in the next iphone application that i am about so start working on.

Thanks a lot,
Ram
DevCave

News Topics

Recommended for You

Got a Question?