SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    media query only taken into account once

    Hello,

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

    Code:
    @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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    The easiest way to find out if it's a cache issue is to clear it. See if that helps first.

  3. #3
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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".

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

  4. #4
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I doubt it. Try changing the iPhone code's first line to

    Code:
    @media only 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.

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

  6. #6
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, and no.

    Very good ideas though... But I'm still facing the same issue...

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Any chance of posting a link? Otherwise we are just poking in the dark here.

  8. #8
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No chance of posting a link, sorry Ralph.

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

    Code:
    @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?

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

  9. #9
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved: set both min-width and max-width...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •