@media only screen and (max-width: 479px) not working for mobile

Question

My mobile version (max-width : 479px) does not show #111 for the background color. Instead, #000 appears as the background color. Please help me.

@media only screen and (max-width: 1024px) {
 body{
   background-color:#ff0000;
  }
}

@media only screen and (max-width: 767px)
{
 body{
   background-color:#000;
  }
}

@media only screen and (max-width: 479px)
{
 body{
   background-color:#111;
  }
}

Answer 1

In the head of your document, make sure you have

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

If you omit this, then many devices will scale the page to fit the viewport.