Why is "width=device-width" totally not working?

Question

I have a problem with setting media queries on devices. It doesn't work at all. It works like normal width. Why is that?

<meta charset="UTF-8" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">

And this is how I use it:

@media only screen and (min-width: 600px) {
    background-color: lightblue;
}

Answer 1

It is very simple. You didn't put background-color: lightblue; in a tag it should be in something like a html or body tag.

You should also update your meta tag to

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Your code should look something like this:

 html{ background-color:red; } @media only screen and (min-width: 600px) { html{ background-color: lightblue; } }

 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

If you want the webpage to turn light blue when it is smaller then 600px you should swap the two colors

For more info you can go to w3schools they explain media queries very clearly.