SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    media queries won't work

    Hello, I just got knowledge about Responsive Design one-two week(s) ago. Today, I just created a meaningless (really!) page to try responsive design. I want it so that it's also viewable in mobile phones.

    It worked in my PC nicely, in different sizes. But when I moved to my android phone, I got scared because it wasn't working at all. I just moved my website files to my SD Card, then opened the folder in my phone and clicked "index.html". That's what I did but failed.

    For your information, I have Samsung Galaxy Y Duos with Android version 2.3.6 (Gingerbread). I viewed the page with the default browser (coz I have no extra browser installed).

    Can you please help me? Would you please test it in your handheld device, I will be very happy if you do it. Here's the files.

    Practise Page_RES.zip

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Hi Ahmed. Is there a chance you ca upload this to the web? I can't test it on a phone unless it's online. But looking at your styles, you have this:

    Code:
    @media screen and (max-width: 480px) {
    
    }
    Try this instead:

    Code:
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    You'll need to add a meta tag to your page:
    HTML Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by CletusSpuckler View Post
    You'll need to add a meta tag to your page:
    HTML Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    That will certainly help the page fit the screen, but is not the actual problem the OP is having—which is that the media queries are not working on mobile devices.

    Still, it is indeed worth adding to the page.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That will certainly help the page fit the screen, but is not the actual problem the OP is having—which is that the media queries are not working on mobile devices.
    I think it might be. The thing is, mobiles usually assume a viewport width of 980px or something like that. And the media queries will check max-width and min-width against the viewport width. If the viewport is considered to be 980px the media queries for max-width: 767px and max-width: 480px will never be triggered.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by CletusSpuckler View Post
    If the viewport is considered to be 980px the media queries for max-width: 767px and max-width: 480px will never be triggered.
    My point is that the media queries will never kick in anyway because they have the wrong syntax. The media query syntax used by the OP is for desktop sites, not for mobiles.

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    They work fine for mobile, provided that the meta tag I posted is added to the page. They aren't just for desktop sites.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by CletusSpuckler View Post
    They work fine for mobile, provided that the meta tag I posted is added to the page.
    Ha ha, I've always had trouble with

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

    as opposed to

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

    on mobile devices.

    Anyhow, to test your theory (I needed to see it for myself!) I uploaded Ahmed's files and tested them with and without the meta element. And I must bow down to your greater knowledge, as it worked.

    So, Ahmed, ignore my posts above and follow CletusSpuckler's superior advice. I'm glad to have learned something, anyhow.

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    That meta tag sure is magical, isn't it?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by CletusSpuckler View Post
    That meta tag sure is magical, isn't it?
    Indeed. I always use it now, but back when I was first trying out media queries, I must not have been using it.

    I recently watched PPK present A Pixel is not a Pixel, and am still digesting the info there, but it's a really interesting talk on this kind of stuff.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Thanks all. CletusSpuckler works like magic. ralph.m, I tried also yours, but sorry, didn't work at all.

    Anyway, I want some explanations. What does the "only" mean in media query (such as: ...only screen....). Again, what should I do to apply the same query for screen and handheld?

    Again, gradients are not working in Android browser. I tried "-webkit-linear-gradient" and "-webkit-gradient" both, none of them worked. Look at my modified gradient codes for the navigation and the footer:

    Code:
    /* for footer */
    background: -moz-linear-gradient(bottom, #6a6a6a 0%, #ddd 100%);
    background: -webkit-gradient(linear, bottom, #6a6a6a 0%, #ddd 100%);
    background: -webkit-linear-gradient(bottom, #6a6a6a 0%, #ddd 100%);
    background: -o-linear-gradient(bottom, #6a6a6a 0%, #ddd 100%);
    background: -ms-linear-gradient(bottom, #6a6a6a 0%, #ddd 100%);
    
    /* for navigation */
    background: -webkit-gradient(linear, left, #1e1e1e 0%, #000 175%);
    background: -moz-linear-gradient(left, #1e1e1e 0%, #000 175%);
    background: -webkit-linear-gradient(left, #1e1e1e 0%, #000 175%);
    background: -o-linear-gradient(left, #1e1e1e 0%, #000 175%);


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
  •