移动方向改变不适用CSS

时间:2013-09-11 17:29:34

标签: css media-queries device-orientation

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

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

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

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

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

但如果我回到landscapeportrait 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模式下598pxportrait384px

我正在使用Nexus 4(Android 4.3)

一旦我改回方向,怎么没有应用CSS?

修改 如果我在portrait中加载网站,然后更改为landscape,则不会应用CSS。 就好像一旦达到最小分辨率,它就无法回归。

5 个答案:

答案 0 :(得分: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'。如果我把这个条件放在最后,那就行了。 'max-device-width'用于视网膜显示。

答案 1 :(得分:3)

我的问题与我的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

答案 2 :(得分: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;
    }
}

答案 3 :(得分:1)

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

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

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

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

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

答案 4 :(得分:1)

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

  

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

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