CODEWITHSUNDEEP
javascriptandroidhtmlioscss
iBrazilian2
iBrazilian2

Reputation: 2293

Why are @media queries ignored when browser is scaled?

I have been trying to understand why when I scale FF, IE, CHROME neither of them catches my website media queries which is suppose to be responsive. Although when I load it in my iPhone it is just as I designed it to be.

My css is pretty much this way..

CSS

.css goes up here for all devices such as body, header, content, etc

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) 
{
    .here goes the css for all devices between 320px and a max of 1024px; 
    using percentages
}

As I mentioned above, If I load it in my phone (safari) the mobile version loads correctly, on iPhone and Android I have tested but if I scale my browser it doesn't change anything, it is the normal css above the media queries.

This is also in my header..

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

Upvotes: 0

Views: 87

Answers (2)

J. A. Streich
J. A. Streich

Reputation: 1712

Because the comment in css should look like:

/* this */

You code says:

.css goes up here for all devices such as body, header, content, etc

Which looks for a class of css, and tries to do find rules for it.

Next, you use

min-device-width

Which means the width of the device, and not the width of the view port, is being checked against. You probably want:

min-width

So what you want is likely:

/* css goes up here for all devices such as body, header, content, etc */

@media only screen and (min-width: 320px) and (max-width: 1024px) 
{
    /*here goes the css for all browser width between 320px and a max of 1024px; 
    using percentages*/
}

Upvotes: 1

developering
developering

Reputation: 1325

I believe the issue is that you are using device-width rather than just width in your media queries. Here is an example that uses max-width rather than device width, and it works without being on a small device: http://jsfiddle.net/cAZPW/1/

I just have a div changing colors as you resize the width of the screen:

.full-size {
  height: 100%;
  width:100%;
  background-color: red;
}
@media screen and (max-width: 500px){
  .full-size {
    background-color:green;
  }
}

Upvotes: 0

Related Questions