Why are my CSS3 media queries not working on mobile devices

Question

I'm using media queries in the styles.css, and they both utilise a variation of:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

In a regular browser (Safari, Firefox), the sites resize to the layout I desire when I minimize the window, but the mobile layout isn't displayed at all on a phone. I only see the CSS that is set to default.

Can someone please assist me on the right path?