2

I have to create two versions of a web app: one for landscape and one for portrait. 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.

How can I make the site with one HTML file and two CSS files?

Matt Stauffer
  • 2,706
  • 15
  • 20
user1808433
  • 3,325
  • 4
  • 16
  • 17

4 Answers4

5

use the css3 media query

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

/* iPads (portrait) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}
NullPoiиteя
  • 56,591
  • 22
  • 125
  • 143
  • this is ok but how to set the images like if we have protrait mode images size is low and in landscape the hare too large so how to tackle this issue – user1808433 Nov 09 '12 at 06:05
2

Look into responsive design. Twitter's Bootstrap project includes a series of responsive layouts, but the method is pretty basic: you define your CSS based on the current width of the device.

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

Here's an article explaining CSS3 and media queries: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Eli Gassert
  • 9,745
  • 3
  • 30
  • 39
  • NullPointer's answer gives the structure and was posted first. I'd award him the points. http://stackoverflow.com/a/13302283/1795053 – Eli Gassert Nov 09 '12 at 04:54
1

Here are the css media queries for Standard Devices :-

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

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

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

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

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
0

This one will help you

http://ajaxian.com/archives/iphone-windowonorientationchange-code

It detects the orientation change of your browser and calls the java Script function . Inside the function you can load your css class as your preferance :)

Nuwan
  • 9
  • 6