Media query only taken into account once

HTML & CSS
1

Hello,

Whithin my stylesheet, I’m using the following bit of code to address to mobile devices:


@media screen and (max-device-width: 480px) {
/*styles*/
}

When I view my site using my iPhone, everything looks as it’s supposed to be only for the first page that is loaded. Then all the other pages seem to ignore my styles (even if I go back to the index that was alright). To be more specific, my iPhone seems to render an old-version of my “responsive styles” .

How could I fix this issue? Is this a caching issue? If yes, why is the first page ok?

2

The easiest way to find out if it’s a cache issue is to clear it. See if that helps first.

3

I cleared the cache, but it didn’t fix my issue.

Another guess: in the code below, will the max-width 600px rules be applied to max-device-width: 480px? I’m thinking that relative units (ems) could be the problem, and be “doubled”.

@media screen and (max-width: 600px) {
/*styles*/
}

@media screen and (max-device-width: 480px) {
/*styles*/
}
4

Ok I tried to remove the rules that could have messed with each other and the problem is still there.

Everything looks good when I load the first page.

As soon as I start to navigate, all the text sizes seem to jump up. Same proble if I go back to my index page (the first page I loaded, which was alright).

Strange…

5

I doubt it. Try changing the iPhone code’s first line to

@media [COLOR="Red"]only[/COLOR] screen and (max-device-width: 480px) {

I think that “only” needs to be there.

Also, to stop text resizing, you can add this to your CSS (say on the html element or body element). E.g.

body {
-webkit-text-size-adjust: none;
}
6

No, and no.

Very good ideas though… But I’m still facing the same issue…

7

Any chance of posting a link? Otherwise we are just poking in the dark here.

8

No chance of posting a link, sorry Ralph.

However, I tried the following (removing device-):

@media only screen and (max-width: 480px) {

}

And I viewed my site using firefox. The problem isn’t there.

Could it somehow be related to those tags?


  	<meta name="HandheldFriendly" content="True">
  	<meta name="MobileOptimized" content="320">
  	<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">
9

Solved: set both min-width and max-width…