@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 for anyone with a iPhone handy. In the meantime, I used the testiphone and this 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.