In the styles.css, I am using media queries, both of which use a variation of:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
The sites resize to the layout I want in a regular browser (Safari, Firefox) when I shrink the window, however, the mobile layout isn't shown at all on a phone. Instead, I just see the default CSS.
Can anyone point me in the right direction?
Today I had similar situation. Media query did not work. After a while I found that space after 'and' was missing. Proper media query should look like this:
Don't forget to have the standard css declarations above the media query or the query won't work either.
I use a few methods depending. In the same stylesheet i use: @media (max-width: 450px), or for separate make sure you have the link in the header correctly. I had a look at your fixmeup and you have a confusing array of links to css. It acts as you say also on HTC desire S.
All three of these were helpful tips, but it looks like I needed to add a meta tag:
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) { }