移动方向更改未应用 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18747644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mobile orientation change not applying CSS
提问by VVV
I'm testing a website I'm developing and am using media queries.
我正在测试我正在开发的网站并且正在使用媒体查询。
When I test and resize the page in a browser, everything is good.
当我在浏览器中测试并调整页面大小时，一切都很好。
But when I test on my mobile device, I encounter a problem when I change the orientation of the phone.
但是当我在我的移动设备上测试时，我遇到了改变手机方向时的问题。
If I load the page in landscapemode, the correct CSS are applied.
如果我以landscape模式加载页面，则会应用正确的 CSS。
When I change to portrait, the CSS are also correct.
当我更改为 时portrait，CSS 也是正确的。
But if I go back to landscape, the portraitcss classes are still being applied.
但是如果我回到landscape，portraitcss 类仍在应用中。
I'm using these metatags
我正在使用这些元标签
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
And in my media queries I have
在我的媒体查询中，我有
@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) { ... }
I've alerted the device width to make sure it's ok and in landscapemode it's 598pxwide and portraitis 384px
我已经提醒设备宽度以确保它没问题，并且在landscape模式下它很598px宽并且portrait是384px
I'm using a Nexus 4 (Android 4.3)
我使用的是 Nexus 4 (Android 4.3)
How come the CSS aren't applied once I change back the orientation?
一旦我改回方向，为什么不应用 CSS？
EDIT:If I load the site in portraitand then change to landscape, the CSS aren't applied.
It's as if once it goes to the smallest resolution, it can't go back.
编辑：如果我加载站点portrait然后更改为landscape，则不会应用 CSS。就好像一旦到了最小的分辨率，就再也回不去了。
采纳答案by VVV
My problem is related to the order of my CSS requests.
我的问题与我的 CSS 请求的顺序有关。
I used to define 'min-device-width'before the rest.
我曾经'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) { ... }
But if I define it last, it works.
但是如果我最后定义它，它就会起作用。
@media
only screen and (min-width: 240px) and (max-width: 520px),
only screen and (min-device-width: 240px) and (max-device-width: 520px) { ... }
For more information about device-width:- check out this question
有关设备宽度的更多信息：-查看此问题
回答by David
On my Nexus 4, I have something that looks like this and seems to work for your test cases:
在我的 Nexus 4 上，我有一些看起来像这样的东西，似乎适用于您的测试用例：
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='viewport' content='width=device-width'>
And I make no reference to orientation in the media query, for example:
我在媒体查询中没有提到方向，例如：
@media only screen and (max-width: 610px) { /* Some CSS here */ }
EDIT: Looks like you have to put max-device-width after the other max-width stuff in terms of the media queries. To quote vyx.ca in the comments below...
编辑：就媒体查询而言，看起来您必须将 max-device-width 放在其他 max-width 内容之后。在下面的评论中引用 vyx.ca...
Just found my problem. Notice how I define 'max-device-width' before the rest. If I put that condition last, it works. 'max-device-width' is used for retina display.
刚刚发现我的问题。请注意我如何在其余部分之前定义“max-device-width”。如果我把这个条件放在最后，它就起作用了。'max-device-width' 用于视网膜显示。
回答by Eduard
Well-known quiksmode sitedefines device-width / device-heightmedia features as static.
著名的quiksmode 站点将设备宽度/设备高度媒体功能定义为static。
These media queries are static once determined; i.e. they do not update the value they're checked against when the device orientation is changed. (So if you start in portrait and then switch to landscape, the portrait device-width still counts. Reloading the page solves this.)
这些媒体查询一旦确定就是静态的；即，当设备方向更改时，它们不会更新它们检查的值。（因此，如果您从纵向开始然后切换到横向，纵向设备宽度仍然很重要。重新加载页面可以解决这个问题。）
That's why using max-device-width is still applied after changing orientation.
这就是为什么在更改方向后仍然使用 max-device-width 的原因。
回答by Bijay Mishra
this code worked for me:-
这段代码对我有用：-
@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;
}
}
回答by Alex Reynolds
Your media queries have overlap. Max-width of 520 will also be true of max-width 610. Also you have an OR in the landscape so it's possible to be true in Portrait if max-width 610 is true. Overlapping media queries will work like CSS in that it cascades so you'll get odd behavior.
您的媒体查询有重叠。最大宽度 520 也适用于最大宽度 610。此外，您在横向上有一个 OR，因此如果最大宽度 610 为真，则在纵向中可能为真。重叠的媒体查询将像 CSS 一样工作，因为它级联，所以你会得到奇怪的行为。
I don't see any reference to orientation:portrait in your queries so how do you know portrait classes are being applied. You typically want to make it an either or when doing orientation queries.
我在您的查询中没有看到任何对orientation:portrait 的引用，所以您如何知道正在应用肖像类。您通常希望在进行方向查询时将其设为“或”。
Also try adding min-width to remove any width overlap
还可以尝试添加 min-width 以消除任何宽度重叠
@media only screen and (orientation:landscape) { ... }
@media only screen and (orientation:landscape) { ... }
@media only screen and (orientation:portrait) { ... }
@media only screen and (orientation:portrait) { ... }
