Why are my CSS3 media queries not working on mobile devices?
Don't forget to have the standard css declarations above the media query or the query won't work either.
.edcar_letter{
font-size:180px;
}
@media screen and (max-width: 350px) {
.edcar_letter{
font-size:120px;
}
}
All three of these were helpful tips, but it looks like I needed to add a meta tag:
<meta content="width=device-width, initial-scale=1" name="viewport" />
Now it seems to work in both Android (2.2) and iPhone all right...
I suspect the keyword only
may be the issue here. I have no issues using media queries like this:
@media screen and (max-width: 480px) { }