@media query (6)

Hello,

I was following part 2 of caurmen's fantastic thread on Mobile LPs and was able to follow all of it.

I made media queries targeting various handsets. All of them worked except the one for the iphone 3gs. I targeted based on the screensize dimensions provided by the javascript ("320x396"), in particular the the height of 396px. I ran the website through browserstack, but the iphone 3gs did not respond. The text size remained the same.

Thinking it could've been a bug on browserstack I took the time to get hold of the handset which also spat out dimensions of 320x396 in the javascript. The actual handset also failed to respond.

My code has been placed in the style area as follows:

@media only screen and (orientationortrait)
and (max-height : 396px) {
.heading {font-size: 10pt;}
.benefits{font-size: 8pt; }
.important_info{font-size: 8pt;} }

Is there something wrong with the way I've written the code? Is there something else I have to target or take into account with the iphone 3GS model?

Thanks for your help!

Ugh I had the same issues with device testing and media queries - you get everything working fine and then one damn device bucks the trend. The following resources may be helpful:
http://caniuse.com/css-mediaqueries
http://css-tricks.com/logic-in-media-queries/
http://cssmediaqueries.com/target/

According to the latter link, to target the iPhone 3G you use:

@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)

Awesome zeno!

Will try all of them and report back on anything that's successful.

okay great news the code worked with a slight change in the dimensions. So rather than using 320px and 480px in your example I had to stick with the dimensions spat out with the Javascript so it ended up being:

@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)

The issue however is that now the landscape orientation doesn't work. Any idea how to sort that out? It doesn't seem to respond to orientation: landscape.

Hmm dunno, try adding "and (orientation: portrait)" to one set of rules and a "and (orientation: landscape)" to another?

yeah unfortunately tried that and it didn't seem to work. I think it's simply the model/software version which just doesn't respond to the orientation query. Thanks heaps for that!