Html CSS媒体查询屏幕方向问题

我使用此媒体查询的目标视口最大宽度为800px，设备最小宽度为400px

@media screen and (max-width: 800px) and (min-device-width: 400px)
{
body {background:#fff;}
}

我需要改变横向的颜色，我使用这个代码

@media screen and (orientation:landscape)
{
body {background:red;}
}

它在设备中运行良好，但背景红色适用于pc浏览器，如何仅在设备横向方向上应用背景红色

---

谢谢。

您没有选择要应用背景的元素

@media screen and (orientation:landscape)
{background:red;}

应该是这样的：

@media screen and (max-device-width: 1000px) 
              and (orientation:landscape){
  body {
    background: red;
  }
}

---

最大设备宽度应使其忽略桌面，如果不将设备放在其中，它仍将影响已使其浏览器变小的桌面。

您没有选择要应用背景的元素

@media screen and (orientation:landscape)
{background:red;}

应该是这样的：

@media screen and (max-device-width: 1000px) 
              and (orientation:landscape){
  body {
    background: red;
  }
}

最大设备宽度应使其忽略桌面，如果不将设备放在其中，它仍将影响已使其浏览器变小的桌面。

请尝试这种方式

@media screen and (max-width: 800px) 
              and (min-width: 400px) {
    body {
        background: white;
    }
}

@media screen and (max-width: 800px) 
              and (min-width: 400px)
              and (orientation:landscape) {
    body {
        background: red;
    }
}

或者尝试检测仅手持设备，查看最小分辨率值，如中所示-例如

从这个角度看，它似乎可以在现代移动设备上正常工作

@media screen and (max-width: 800px) 
              and (min-width: 400px) {
    body {
        background: white;
    }
}

@media screen and (max-width: 800px) 
              and (min-width: 400px)
              and (orientation:landscape) {
    body {
        background: red;
    }
}

或者尝试检测仅手持设备，查看最小分辨率值，如中所示-例如

---

综上所述，如果您将这些元标记添加到页面标题，它似乎可以在现代移动设备上正常工作：

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

等于

@media screen and (max-width: 1000px){}

使用你喜欢的每一个： [具有键宽度的元标记] 或

---

[没有元标记，但设备宽度]

如果您将这些元标记添加到页眉：

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

等于

@media screen and (max-width: 1000px){}

使用你喜欢的每一个： [具有键宽度的元标记] 或

---

[没有元标签，但设备宽度]

这不会解决问题；因为问题是方向也会影响Dekstop-你应该像@Fabrizio Calderan那样做did@Andy：更新了我的问题，但我需要瞄准手持设备方向。。。在我的情况下，它会影响个人电脑also@krish更新，使用最大设备宽度，而不是最大宽度这不会解决问题；因为问题是方向也会影响Dekstop-你应该像@Fabrizio Calderan那样做did@Andy：更新了我的问题，但我需要瞄准手持设备方向。。。在我的情况下，它会影响个人电脑also@krish更新，使用最大设备宽度，而不是最大宽度PC是横向的，不是吗？@GarethCornish:如何定位手持设备横向？PC是横向的，不是吗？@GarethCornish:如何定位手持设备横向？如果他们将浏览器变小，这仍然会影响台式机，try max device width这仍然会影响桌面，如果他们将浏览器变小，try max device width我对我的问题做了一点修改，mata tag可以查找“宽度”，但不用于“高度”。我对我的问题做了一点修改，mata tag可以查找“宽度”，但不用于“高度”。