Styling your web pages for iPhone and iPad

Share your creations with us via Twitter using #ipwa and #iPadORM

By Elisabeth Robson
April 3, 2010 | Comments: 6


Now that the iPad is out, it's time to style your web pages so they look good on both the iPhone and the iPad.

If you participated in the online video course, Learn to Build iPhone Web Apps with HTML, CSS and JavaScript then you already know most of what you need to know to style your web pages for the iPad too.

In this screencast, I create one page of content that is styled in two different ways: one for the iPhone and the iPad, and show you how to use CSS Media Queries to select the correct style sheet depending on the device you're using. I also demonstrate how to change the style on the iPad depending on whether you're in portrait or landscape orientation, using a little JavaScript.

If you make any web pages for your iPad that you'd like to share with us, post the link on Twitter with the hash tags #ipwa and #iPadORM. We'd love to see your creations!

p.s. sorry about the occasional audio interruption, my iPhone was too close to my mic!


You might also be interested in:

6 Comments

when you did the console.log() in the javascript, where can you see that in the iPad or iPhone simulator?

If you watch the very end of the video, I show how to see the console log messages. You go into Settings > Safari > Developer and turn it on there, and it appears as a bar above your web pages. Then you can click on the bar to see the messages. Handy for debugging too!

FYI, the iPad supports css media query based on orientation so you don't have to use javascript detection if you don't want to. The iPhone doesn't support it yet.

http://www.cloudfour.com/ipad-css/

Jason -
Oh nice! I didn't know that, thanks for the tip. That makes it a lot easier.

Elisabeth

elisabeth, what's the name of the iphone emulator you were using in this video?

Thank you so much for this video! Amazing and clear explanation.

News Topics

Recommended for You

Got a Question?