redconservatory redconservatory - 2 years ago 81
CSS Question

Why are my CSS3 media queries not working on mobile devices?

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?

Answer Source

All three of these were helpful tips, but it looks like I needed to add a meta tag:

<meta name="viewport" content="width=device-width" />

Now it seems to work in both Android (2.2) and iPhone all right...

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download