A stylesheet full of correct breakpoints that does nothing on an actual phone is almost always this. Mobile Safari and the stock Android browser default to a 980px layout viewport and then scale the rendered page down to fit the screen, so a max-width: 480px query is asked about 980 pixels and correctly declines to match.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* without the tag above, this never matches on a 320px handset */
@media (max-width: 480px) {
.sidebar { display: none; }
.grid .col { width: 100%; }
}
</style>
<!-- copied out of every boilerplate, and it takes pinch zoom away -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">width=device-width sets the layout viewport to the device width in CSS pixels rather than physical ones, so a high-density screen still reports 320 and the breakpoints stay in the range the design was drawn at. initial-scale=1 is not redundant alongside it: without it, iOS rotating to landscape zooms the page instead of re-laying it out, which is the bug that looks like a broken breakpoint and is not one. The two additions in the last block are the ones to leave out — they exist to stop a layout being zoomed, and what they actually do is remove pinch zoom from anyone who needs it, on a page whose text may still be small. Note also that IE8 does not support media queries at all, so a site that has to work there needs either a fixed-width fallback stylesheet or respond.js; the meta tag does nothing about that, and desktop browsers ignore it entirely.