SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  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,102
    Mentioned
    448 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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,102
    Mentioned
    448 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;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    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...

  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,102
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Any chance of posting a link? Otherwise we are just poking in the dark here.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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
  •