CSS3: Detecting device orientation for iPhone

Question

So this declaration works fine for iOS 4 and 4.1, but not for older versions. Any advice?

@media screen and (device-width:320px) and (orientation:portrait) {
    /* iPhone Portrait Styles Here*/
}

@media screen and (device-width:320px) and (orientation:landscape) {
    /* iPhone Landscape Styles Here*/
}

Answer 1

Yes. According to the MDN docs:

orientation

Value: landscape | portrait

Media: visual

Accepts min/max prefixes: no

Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.

Example

To apply a style sheet only in portrait orientation:

@media all and (orientation: portrait) { ... }

Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.