移动设备方向变化时CSS未应用

Question

我正在测试我正在开发的网站，并使用媒体查询。当我在浏览器中测试和调整页面大小时，一切正常。但是当我在移动设备上测试时，当我改变手机的方向时遇到问题。如果我在横屏模式下加载页面，则应用了正确的CSS。当我更改为纵向时，CSS也是正确的。但是如果我回到横向状态，则仍然应用“纵向”CSS类。我正在使用这些meta标签。

<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) { ... } 

我已经检查了设备的宽度，确保在横屏模式下为598px，竖屏模式下为384px。

我正在使用 Nexus 4 (Android 4.3)。

为什么一旦我改变方向，CSS就不再应用？ 编辑： 如果我在竖屏模式下加载站点，然后切换到横屏模式，CSS就无法应用。 好像一旦达到最小分辨率，就无法返回。

- VVV

---

你每次都要手动刷新吗？如果没有，那么肯定需要使用JavaScript使其响应。 - beautifulcoder

我非常肯定你必须使用JS来重置CSS。使用jquery.resize()函数来在方向改变时修复CSS。 - JTravakh

@beautifulcoder 不，我没有点击刷新按钮，当我刷新时，CSS样式显示正常...问题出现在加载页面后改变屏幕方向时。 - VVV

我不认为你需要刷新，尝试调整浏览器窗口大小。 - David

@David，在jquery.resize()中，我警告$(window).width()，并且我得到正确的新宽度以在更改方向时触发resize()。 - VVV

但这并不能解决你的问题，你也不想用JS重新做整个响应式布局，对吧？ - David

Answer 1

在我的 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-width内容之后放置max-device-width。引用下面评论中的vyx.ca所说...

刚刚找到我的问题。请注意，我是在其他条件之前定义了“max-device-width”。如果我将该条件放在最后，它就可以工作。“max-device-width”用于视网膜显示屏。

- David

---

你获取错误的步骤如下：

1. 将手机置于横屏模式，2. 点击刷新加载页面，3. 将手机转至竖屏模式，4. 再将手机转回横屏模式，5. 错误出现。我理解得对吗？

- David

你是否保留了其他元数据（包括MobileOptimized和其他viewport数据），还是将其删除了？ - David

在你的演示中似乎工作正常（我注意到导航栏居中而不是右对齐）。我也在使用modernizr...奇怪。 - VVV

也许现在是时候看一下你的其余代码并注释掉一些东西了，特别是如果你有很多媒体查询。 - David

刚刚找到了我的问题。注意我是在其他条件之前定义了“max-device-width”。如果我把这个条件放在最后，它就可以工作了。“max-device-width”用于视网膜显示屏。 - VVV

Answer 2

我的问题与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) { ... }

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

- VVV

---

我曾经遇到过类似的问题，我通过在之前使用的max-x参数中添加max-device-x参数来解决它。祝好运！ - Mr-Programs

Answer 3

众所周知，quiksmode网站将设备宽度/高度媒体特性定义为静态的。

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

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

- Eduard

Answer 4

这段代码对我有效:

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

- Bijay Mishra

Answer 5

您的媒体查询有重叠。520的最大宽度也适用于610的最大宽度。此外，在横向模式中存在OR，因此如果610的最大宽度为真，则在纵向模式中也可能为真。与CSS类似，重叠的媒体查询将会级联，因此您将会得到奇怪的行为。

我没有看到任何与orientation:portrait相关的查询，因此您如何知道应用了纵向类别。通常情况下，在执行方向查询时，您希望将其设置为“或者”。

此外，请尝试添加min-width以消除任何宽度重叠。

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

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

- Alex Reynolds

---

谢谢。我知道有重叠的问题，在这种情况下没关系。但问题是我的设备宽度为598（Nexus 4），所以最大宽度为520的类不应该被应用。 - VVV