My media query doesn't work on my android device


My media query works fine in pc's browser when i re-size it, but when i access my website through localhost with my android device, my media query doesn't work? What can the problem be? My device has 480 x 800 pixels resolutions.

Here is my media query:

@media (max-width: 480px) {
div.itemRelated ul li {float: left;width: 20%;}
div.itemRelated ul li a img{width:90%;}
div.itemRelated ul li a{text-align:center;}
h2, h2 a:link, h2 a:visited{font-size:.7em;}
#container_main{width:90%;margin: 0 auto;}
.wrapper960{margin:0 auto;}/*ova treba da se cepne*/
#sidecol_b, #sidecol_a{display:none;}
.sigProContainer sigProClassic sigProClassic{margin-left:10%;}
#hornav ul li a{font-size:1em;padding: 0 5px;width:8%}
#search {clear:both;top: 20%;left: 15%;}
Problem courtesy of: Darko


If you are specifically targeting android device, or any device with 480x800 try this

@media only screen and (min-device-width: 480px) {
  /* Style goes here */

A pretty good article if you like to read

Solution courtesy of: Mr. Alien


I have come across a similar issue surrounding the multitude of Android devices screen widths and screen densities.

In the end I settled on this media query:

@media only screen and (max-width: 765px) {
    /* Style goes here */

But here is a handy site that provides more device and orientation specific media queries

Discussion courtesy of: Seb Ashton

The width of Android devices is often not the actual screensize. If you want to have the width of the screen you need a viewport meta tag.

 <meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Use this meta tag in your HTML


The code above also disables the scaling (zooming), which is not nice for users. So you can do it without disabling scaling to:

<meta id="viewport" name="viewport" content ="width=device-width" />
Discussion courtesy of: TIIUNDER

This recipe can be found in it's original form on Stack Over Flow.