移动媒体查询弄乱了桌面版

Question

网站正在进行中：http://www.modernfuture.net/wordpress

在我的CSS中，我使用以下行为我的Android设备（480px）设置横向模式：

@media only screen and (max-width:480px)

如果在桌面上查看网站，这非常有效，但它在我的android galaxy S3上无效。

但是，如果我将该行代码更改为

@media only screen and (min-width:480px)

看起来我想在我的Android设备上（除了右侧的小空白区域），但似乎媒体查询的样式应用于我的桌面版本。

似乎媒体查询无法正常工作，因为定义横向模式的CSS不仅仅适用于我的Android设备 - 它既可以应用于桌面版也可以应用于桌面版。 android横向版本或其中没有一个。我是否必须为桌面宽度设置单独的媒体查询？或者它更简单？

提前感谢一大堆！

Answer 1

要定位S3，您需要与问题中的像素大小不同的

 @media only screen and (max-device-width: 720px) and (orientation:portrait) {
  // your css
}

@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
  // your css
}