Print
Listen
By 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!
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:
iPad in portrait orientation:
iPhone:
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.
A neat way of testing this technique is covered here:
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
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