Creating Landscape and Portrait layout using HTML and CSS

Question

I have got a requirement where I need to write a HTML/CSS, which should display Landscape and Portrait, depending upon the orientation of the iPad, that is initially I want to write this using HTML and CSS and then later use it for the iPad developement.

My question is what is the best way to achieve this? Does it make sense to have two different html/css files and load them depending on the orientation of the device or is there any other way to implement this. Any information regarding this would be appreciated.

Thanks Raaks

Answer 1

You want to look at using responsive web design to achieve this. You can determine what styles to apply depending on the size of the screen. Remember, the screen is wider when it's in portrait view.

What you do is, you create two different stylesheets. One for when it's in portrait and the second for landscape. Then, you use CSS3 media queries to switch between the two.

Sample code:

Portrait:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="portrait.css" />

Landscape:

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 1024px)" href="landscape.css" />

As you can see, you are passing the target medium and declaring a target width for each stylesheet. The portrait stylesheet will only be applied if the screen's current width is less than or equal to 768 pixels. Conversely, the second stylesheet will only be applied if the screen resolution is a minimum of 1,024 pixels wide.

A simple tutorial describing the technique.

The original A List Apart article describing the technique.

Now if by iPad development, you mean native applications then this will not work. For native applications, you need to use the cocoa framework to determine the device's orientation. However, if you are simply using a webview in a native application then this will work fine.

Hope this helps.