旋转景观时移动响应不起作用

Question

所以我们的网站在我们实现之前处于最后阶段，但是我们刚刚注意到当我们检查移动响应时一切正常，直到我们将移动设备旋转到横向视图并且它显示的风格与桌面和响应媒体的疲惫不起作用！   我们的响应代码如下：

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

任何人都可以帮忙吗？

Answer 1

景观设备比率大于600px。如果使用chrome，dev工具，在调整视口大小时，它会准确显示可见的像素数量。

关闭我的头顶，我会说你需要将媒体查询更改为;

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

Answer 2

添加

<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;
  }
}

用于移动设备（手机）