我正在测试我正在开发并正在使用媒体查询的网站。
当我在浏览器中测试并调整页面大小时,一切都很好。
但是当我在我的移动设备上测试时,当我改变手机的方向时遇到问题。
如果我以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。
就好像一旦达到最小分辨率,它就无法回归。
答案 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。