media queries won't work

[Ahmed Sadman]

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

[ralph.m]

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:

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

}

Try this instead:

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

}

[CletusSpuckler]

You'll need to add a meta tag to your page:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

[ralph.m]

You'll need to add a meta tag to your page:

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

[CletusSpuckler]

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.

[ralph.m]

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.

[CletusSpuckler]

They work fine for mobile, provided that the meta tag I posted is added to the page. They aren't just for desktop sites.

[ralph.m]

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.

[CletusSpuckler]

That meta tag sure is magical, isn't it?

[ralph.m]

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.

[Ahmed Sadman]

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:

/* 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%);