1

我正在将此媒体查询用于目标视口最大宽度为 800 像素的设备最小宽度为 400 像素

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

我需要为此更改横向的颜色，我使用此代码

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

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

谢谢你。

4

3 回答 3

5

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

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

应该是这样的：

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

max-device-width 应该让它忽略桌面，如果你不放在device那里，它仍然会影响那些让浏览器变小的桌面。

于 2013-02-08T12:24:08.463 回答
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;
    }
}

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

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

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

于 2013-02-08T12:26:59.130 回答
2

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

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

所以关键：“宽度”意味着相同的“设备宽度”。所以，

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

等于

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

使用你喜欢的每一个：
[带有键“宽度”的元标签]

或

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

于 2013-06-16T12:46:41.457 回答