CODEWITHSUNDEEP
iosgoogle-chromecssmedia-queries
Ryan Giglio
Ryan Giglio

Reputation: 1104

Media Queries not working properly in Chrome for iOS

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.sstatic.net/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.

Upvotes: 4

Views: 9827

Answers (8)

Coderbit
Coderbit

Reputation: 801

First of all ! Make sure your browser showing a page on a 100% withour any zoom. If its zoomed it will mess up all the mediaqueries calculations :)

Upvotes: 0

lukaszkups
lukaszkups

Reputation: 5990

make sure if You didn't copypaste too many @media words e.g.

@media screen and (max-width: 1200px), @media screen and (max-device-width: 1200px), @media screen and (max-height: 720px), @media screen and (max-device-height: 720px){
  ...
}

there should be only one @media in the beginning! This is very common mistake.

Upvotes: 0

mkmkmk
mkmkmk

Reputation: 71

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.

Upvotes: 5

Mark Lehm
Mark Lehm

Reputation: 21

The issue is not with the @media css in a separate file. Mobile chrome caches like crazy and the reason why it looked like you fixed it by moving it to a different sheet, is because chrome thought it was new and hadn't cached it yet.

Upvotes: 0

codeview
codeview

Reputation: 209

I was having a similar problem. @Nick Simpson-Deeks answer worked for me (full URL path to stylesheet). What also worked was putting the media queries in a separate stylesheet.

Upvotes: 0

Ryan Giglio
Ryan Giglio

Reputation: 1104

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.

Upvotes: 2

Nick Simpson-Deeks
Nick Simpson-Deeks

Reputation: 73

Not sure if this helps, but I found my style sheets were half breaking in Chrome iOS (but working fine on every other browser and device I tried, media queries included) until I made the sylesheet link in my head tag a full url - "http://www.directory/style.css", as opposed to just a relative file path ("/style.css", or whatever).

Upvotes: 0

Stephen Radford
Stephen Radford

Reputation: 547

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;">

Upvotes: 4

Related Questions