Question

我正在使用此媒体查询目标视口最大宽度800px设备mininmum 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; } }值的手持设备 - 例如

{{1}}

看看这个list of displays by pixel density，它似乎可以在现代移动设备上正常运行

Answer 3

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

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

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

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

等于

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

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

OR

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

CSS Media Query屏幕方向问题

3 个答案: