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.
https://i.stack.imgur.com/zL0Vk.jpg
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.
Unfortunately this problem seems to have magically resolved itself. I think it may be somehow related to Chrome’s “Request Desktop Site” feature but I’m not positive. Wish I had some better advice for future problem-havers.