移动响应不工作时旋转横向

Question

所以我们的网站在上线前的最后阶段，然而我们刚刚注意到，当我们检查移动响应时，一切都很好，直到我们将移动设备旋转到横向视图，它显示的样式与桌面相同，响应媒体不工作!我们的响应代码如下:

@media screen and (max-width:600px){
.stats{
    display:none;
}
}

有人能帮忙吗?

Answer 1

横向设备比例大于600px。如果你使用chrome，开发工具，当调整视口大小时，它会准确地显示可见的像素量。

我想说的是，你需要把你的媒体查询改为;

@media screen and (max-width:787px){
.stats{
   display:none;
}
}

Answer 2

add

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

在头标签之间，这样你就可以从移动设备(https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag)获得正确的宽度，并将媒体查询更改为

@media screen and (max-width:767px){
  .stats{
    display:none;
  }
}

移动设备(电话)