Question

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

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

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

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

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

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

我正在使用这些元标记

<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。就好像一旦达到最小分辨率，它就无法回归。

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-device-width放在其他max-width之后。在下面的评论中引用vyx.ca ...

刚刚发现我的问题。注意我如何在其余部分之前定义'max-device-width'。如果我把这个条件放在最后，那就行了。 'max-device-width'用于视网膜显示。

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

有关设备宽度的详细信息： - check out this question

Answer 3

这段代码对我有用： -

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

Answer 4

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

我没有看到任何方向参考：查询中的肖像，所以您如何知道正在应用肖像类。您通常希望将其作为一个或在进行方向查询时。

同时尝试添加min-width以删除任何宽度重叠

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

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

Answer 5

众所周知的quiksmode site将设备宽度/设备高度媒体功能定义为静态。

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

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

移动方向改变不适用CSS

5 个答案: