旋转横向时移动响应不起作用

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

添加

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

适用于移动设备（手机）

Answer 3

只需添加方向兄弟即可。

@media (orientation: landscape) {

/* 这里是你的风景特定风格 */ }