iPhone is ignoring CSS media queries. Viewport tag present. Working in desktop
Solution 1
Edit
What solved this for me is a double ("or"-operated) media query, for either max-device-width or max-width. It's like David Rönnqvist's first suggestion, but it was only putting max-width, max-device-width
BOTH in the media query that worked for me.
@media screen and (max-device-width:640px), screen and (max-width:640px) {
/* styles here */
}
BBTony, I hope this works for you.
I'm keeping the below because it is a fuller description of the problem than i've found anywhere else. I disliked my first solution (below the line) so much that I re-researched for the thousandth time - thanks to this post which gave me the above solution without the ridiculous !importants.
Edit: this also worked, but it's extremely inelegant: Putting "!important" on every line of the media query conditional CSS.
I was reluctant to propose that as an answer, but after going bonkers researching this for 3 days, it was the first thing that worked for me.
Full description of the problem: I had similar symptoms as BBTony. I had the viewport tag (and I had it above the stylesheets as recommended).
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
My media query, intended to catch any smallish device, was being ignored by an iPhone 3gs running iOS 5.1, but the same media query was being properly picked up by an iPhone 4s running iOS 6.
@media only screen and (max-device-width:640px) {
/* many styles here */
}
Very oddly, while most declarations within the media query were being ignored by the older iPhone, some of them were being respected. The newer iPhone 4s however respected all the CSS within the media query, as expected. On Safari desktop, the media queries all worked perfectly, snapping at both the breakpoints (there are 2).
I linted my CSS through several different linters, after reading here that CSS errors can cause mobile browsers to ignore media queries. After making certain that my CSS was compliant, and just for the hell of it, I put !important declarations after each and every line of CSS within the media query - like 80-100 !importants.
Presto.
I can't tell you how mad it made me that this even worked, and I'm curious why the old iphone would only respect the conditional with !important in this case.
Solution 2
I've previously used this for my site and it worked as iPhone specific media queries for me
@media only screen
and (max-device-width: 480px)
and (orientation:landscape) {
/* iPhone landscape */
}
@media only screen
and (max-device-width: 480px)
and (orientation:portrait) {
/* iPhone portrait */
}
Answers to other questions like this seem to suggest that 480px
for the max-device-width
is what you should go for in your media query.
Related videos on Youtube
BB Tony
Updated on November 01, 2022Comments
-
BB Tony over 1 year
EDIT: This was a total rookie error on my part. I was editing a different fileset to the one I was testing. Sincere apologies to all who answered to help me out. I've upvoted all answers as I at least learned a little more on media queries from you all, but none provided the answer. Advice pls on what now to do with this ticket?
This is a busy topic on the site, but I haven't seen the solution for this problem.
The
viewport
tag is present. I'm using:<meta name="viewport" content="width=device-width,initial-scale=1.0">
When I resize the browser window in Chrome, it works fine, and I can see it snapping to new breakpoints as they are reached, however iPhone Safari displays the top left of the site only, with no sign of picking up any queries.
The CSS Media query I'm using for iPhone portrait is:
@media (max-width: 321px) { }
I'm using Bootstrap and LESS, so my media queries are at the end of the styles.
Sorry I'm not in a position to share code on this. It's an odd one — I'm hoping someone can see if there's something I may be missing.
EDIT
Here's a very basic example which is working on my iPhone. I can rotate from portrait to landscape and the bg color will change - so there's nothing wrong with the media query I'm using:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style type="text/css"> body { background: blue; } @media (max-width: 321px) { body { background: red; } } </style> </head> <body> Here is my content... </body>
-
BB Tony about 11 yearsThanks. That looks right. The more I look into this, the more I think I'm triggering some unusual bug.
-
David Rönnqvist about 11 years@BBTony (Seeing as this is your first question here) if an answer is useful, consider upvoting it. If it solves your problem, consider marking it as "accepted". But don't just do it because me or someone else told you. If your question still isn't answered, consider editing it with more detail to help us understand the issue.
-
BB Tony about 11 yearsThanks for advice. Still learning the ropes. I will do so. Thanks. Still looking into it. Will post an answer myself when I find the solution.
-
BB Tony about 11 yearsThanks for looking into this. I'm off that project for the time being, but will be returning to it, so I'll bear your solution in mind then.
-
BB Tony about 11 yearsComment above edited. Once I'd properly digested your answer. Apologies...
-
Jonathan Lind about 8 yearsHad a similar problem where a css rule did not take affect when iphone was flipped to horizontal state, only when page was refreshed did it activate the css rule. This fixed it for me!