9

我正在测试我正在开发并使用媒体查询的网站。

当我在浏览器中测试和调整页面大小时，一切都很好。

但是当我在移动设备上进行测试时，我在更改手机方向时遇到了问题。

如果我以landscape模式加载页面，则会应用正确的 CSS。

当我更改为portrait时，CSS 也是正确的。

但如果我回到landscape，portraitcss 类仍在应用中。

我正在使用这些元标记 

<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

在我的媒体查询中，我有

@media 
only screen and (max-width: 610px),
only screen and (max-width: 610px) and (orientation:landscape) { ... }

@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... }

我已经提醒设备宽度以确保它正常并且在landscape模式下它很598px宽并且portrait是384px

我正在使用 Nexus 4 (Android 4.3)

更改方向后，为什么不应用 CSS？

编辑： 如果我加载网站portrait然后更改为landscape，则不会应用 CSS。就好像一旦达到最小的分辨率，就再也回不去了。

4

5 回答 5

4

在我的 Nexus 4 上，我有一些看起来像这样的东西，似乎适用于您的测试用例：

<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='viewport' content='width=device-width'>

而且我在媒体查询中没有提及方向，例如：

@media only screen and (max-width: 610px) { /* Some CSS here */ }

编辑：看起来你必须把 max-device-width 放在其他 max-width 的媒体查询之后。在下面的评论中引用 vyx.ca ......

刚发现我的问题。请注意我如何在其余部分之前定义“最大设备宽度”。如果我把这个条件放在最后，它就会起作用。'max-device-width' 用于视网膜显示。

于 2013-09-11T17:44:16.450 回答
4

我的问题与我的 CSS 请求的顺序有关。

我曾经'min-device-width'在其余部分之前定义。

@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... }

但如果我最后定义它，它会起作用。

@media
   only screen and (min-width: 240px) and (max-width: 520px),
   only screen and (min-device-width: 240px) and (max-device-width: 520px) { ... }

有关设备宽度的更多信息：-查看这个问题

于 2013-09-11T18:11:54.633 回答
3

著名的quiksmode 站点将device-width / device-height媒体功能定义为static。

一旦确定，这些媒体查询就是静态的；即，当设备方向更改时，它们不会更新检查的值。（所以如果你从纵向开始然后切换到横向，纵向设备宽度仍然很重要。重新加载页面可以解决这个问题。）

这就是为什么在改变方向后仍然使用 max-device-width 的原因。

于 2014-01-27T14:33:07.077 回答
2

这段代码对我有用：-

  @media only screen and (min-width: 240px) and (max-width: 520px), only screen and (min-device-width: 240px) and (max-device-width: 520px) and (orientation:portrait)
{
    body
    {
        background:#009;
    }
}

@media only screen and and (max-width: 610px), only screen and (max-device-width: 610px) and (orientation:landscape)
{
    body
    {
        background:#993;
    }
}
于 2014-03-13T07:12:54.650 回答
1

您的媒体查询有重叠。最大宽度 520 也适用于最大宽度 610。此外，您在横向中有一个 OR，因此如果最大宽度 610 为真，则在纵向中可能为真。重叠的媒体查询将像 CSS 一样工作，因为它是级联的，所以你会得到奇怪的行为。

我在您的查询中没有看到任何对orientation:portrait 的引用，所以您如何知道正在应用肖像类。您通常希望在进行方向查询时将其设为非此即彼。

还可以尝试添加 min-width 以消除任何宽度重叠

@media only screen and (orientation:landscape) { ... }

@media only screen and (orientation:portrait) { ... }

于 2013-09-11T17:39:11.513 回答