移動媒體查詢搞亂了桌面版本

Question

進行中的網站： http : //www.modernfuture.net/wordpress

在我的CSS中，我使用以下代碼行為Android設備（480px）設置了橫向模式：

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

如果在台式機上查看網站，則此方法非常有效，但不適用於我的android系統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
}