Media Queries not working properly in Chrome for iOS

Question

I've been working on a mobile first website, and have found that my media queries aren't working properly in Chrome for iOS. It seems that no matter what size device I use (iPhone, iPad) and what orientation I view it at, the page is showing a hybrid version of the baseline (mobile) styles and the "above 481px" styles. I uploaded a small gallery of screenshots (with descriptions) to illustrate this problem.

http://imgur.com/a/6Ee7C

You can see the page live at http://dev.thesmackpack.com. The CSS is unminified in case there's anything you can learn by poking around in there. The media queries have worked properly in every other browser I've tested them in, only Chrome for iOS is giving me these problems.

EDIT: It seems to be working fine on some other devices I found to test on. But I can't make it UN-break on my iPhone and iPad and those are the devices I'm developing the site on so the problem is still a problem.

Answer 1

It does look like chrome just won't let go of it's cache. I tried deleting cache, history, etc. No affect. Reinstalled the app and all the correct styles loaded. Looks like they got some bugs to fix.

Answer 2

Try separating your viewport meta with semi-colons

<meta name="viewport" content="width=device-width; initial-scale=1.0">

If that fails you might need to restrict zooming

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">