@media selectors for iPhone

[john love]

With respect to targeting iPhones, I understand <link ...> to access different .css style sheets.

My challenge is the proper use of @media selectors, such as:

@media max-device-width:480px {
#poemWrapper {
text-align: left;
}

#poem {
width: auto;
color: #00f; /* just for testing */
}
}


This inline approach is not working for me.

[rkrause]

I would look at how you have those brackets wrapped.



Ryan.

[john love]

brackets wrapped??

I substituted all for max-device-width:480px and it worked just dandy. So, I don't understand what you are getting at.

Nevertheless, I found the problem, though I definitely do not understand why it is a problem.

Instead of @media max-device-width:480px, I used:

@media screen and (orientation:portrait) This worked. I did not need changes for the landscape orientation.

Thanks. :)

John

P.S., here's the link (http://webpages.charter.net/jolove/Escort_Folder/Dedication_Poem_iOS.html) for anyone with a iPhone handy. In the meantime, I used the testiphone (http://www.testiphone.com/) and this (http://iphonetester.com/) web site.

[john love]

I'm beginning to think the so-called iPhone/any mobile emulators out there do not do their job accurately.

What is driving me nuts is that I do not own a smartphone and therefore I am forced to use these so-called emulators whose effectiveness I've come to doubt .. in short, do they accurately emulate.

In addition, these emulators do not handle re-direction.

Bottom line .. I guess I really don't know if:

@media only screen and (max-device-width:480px) and (orientation:portrait)

bombs on a real mobile phone .. it definitely does on 2 so-called iPhone emulators.

Many, many folk testify that the above @media works, but I just cannot confirm it.

John Love

[chrishirst]

Personally I do nothing "special" at all for mobile devices and don't have a problem.
I've tested the pages on various real phones (mine or friends and family).

I now simply use relative dimensions for everything and let the devices handle it.