Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I want to change my web page CSS for web browsers running on cell phones, like the iPhone and Android. I’ve tried something like this in the CSS file:
@media handheld {
body {
color: red;
}
}
But it doesn’t seem to have any effect, at least on the iPhone. How can I write my CSS to work differently on the iPhone etc, ideally without using javascript?
You can use @media queries:
This particular version will target the iPhone (and any other device with a screen of
max-device-widthof480px.Apple, for the iPhone, though this is from memory so I can’t be entirely sure of its accuracy, chose to disregard the use of
handheldormobilestylesheets, since it, and other iOS devices, were capable of rendering css more or less on a par with desktop browsers, via Safari. For other devices I’m unsure, exactly, how faithful they are, though the A List Apart article (linked-to above) gives a brief run-through of some.Edited in response to comment, from @Colen:
I’m unable to say for certain, since I’ve no access to those devices, however another A List Apart Article: Responsive Web Design notes that:
So I presume that they, Android devices, must be target-able by @media-queries, but, as noted, I’m unable to say with any certainty.
To target device-resolution, there is an example of:
Further reading: W3 Candidate Recommendation for media queries.