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

Question

我的移动版本(最大宽度:479 像素)不显示#111 的背景颜色。相反，#000 显示为背景色。请帮助我。

@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

在文档的头部，确保你有

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

如果你忽略这个，那么许多设备会缩放页面以适应视口(viewport)。