Question

I need to create two versions for my web app (say, 1 HTML page only): one for landscape (wide view) and one for portrait (tall view). But I need to run these both like we normally do in iPad; when in portrait mode, portrait version should work and if mode is landscape then the landscape version.

I read this somewhere but not sure. Can I make the application with one HTML file and two CSS files?

Answer 1

Check out for Responsive Web Design on Google. My application uses Twitter’s Bootstrap project , but the method is pretty obvious: you define your CSS based on the current width of the device. The width changes, the CSS changes.

http://twitter.github.com/bootstrap/scaffolding.html#responsive

For CSS3 and media queries, check this article:

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

It could go somehting like this :

/* iPads (landscape-wide) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

 /* iPads (portrait-tall) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

Will need some R&D though…

Hope this helps