CSS媒体查询屏幕方向问题

Question

我正在使用此媒体查询的目标视口最大宽度为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浏览器，也如何仅将背景红色应用于设备横向？

谢谢。

Answer 1

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

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

应该是这样的：

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

max-device-width应该使它忽略台式机，如果您不将device放在台式机中，它将仍然影响使浏览器变小的台式机。

Answer 2

以这种方式尝试

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

或尝试通过http://jsbin.com/irozuf/1/edit中的min-resolution值检测仅手持设备的设备-例如

@media screen and (max-width: 800px) 
              and (min-width: 400px)
              and (min-resolution: 97dpi)   /* a typical screen has 96dpi */
              and (orientation:landscape) {
    body {
        background: red;
    }
}

通过像素密度查看此显示列表，似乎可以在现代移动设备上正常工作

Answer 3

如果您将这些元标记添加到页面顶部：

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

因此键：“宽度”表示相同的“设备宽度”。所以，

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

等于

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

使用您喜欢的每一个：
[键为“宽度”的元标记]

要么

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