Orientation media-query (css) doesn't work on Ipod w/ iOS 4.2.1

Question

I'm developing a mobile website, using mobile boilerplate as a base framework. In my stylesheet I use @mediaqueries to detect if the device is in portrait or landscape mode.

@media screen and (orientation: portrait) {
    .topteaser .article-headline { font-size: 138.5%; }
}

@media screen and (orientation: landscape) {
    .topteaser .article-headline { font-size: 123.1%; }
}

This works fine on an iPod Touch (Model MC540FD, iOS 4.3.3, retina display), but on an old iPod Touch (Model MC086FD, iOS 4.2.1, no retina display) it doesn't work. Even in portrait mode the landscape styles are applied.

(Btw, I deleted Cookies, Cache and Chronic, restartet the iPod- but the problem still appears)

I also checked http://wapsbttest1.momac.net/sandbox/css3/media_queries.html with both iPods, and the old one tells me that it is in landscape mode even if it isn't...(stupid iPod!)

Does iOS 4.2.1. doesn't support orientation mediaqueries? I google'd and found out that it should be supportet at least since 4.2.

Are there any other mediaqueries which detects only iPhones and don't work with device-width or ratio?

Answer 1

Media queries have been supported in iOS since 1.0, so that isn't your problem. I believe that pre-retina display/non-iPad devices don't support orientation.