wake-up-neo.net

Medienabfrage funktioniert nicht in IE9

Ich habe ein seltsames Problem, das nur bei IE9 auftritt. Ich arbeite an einer Webseite mit einem Desktop-Layout und einem mobilen Layout. Gleiches HTML, anderes CSS. Das Problem tritt mit dem folgenden Code auf:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)

Alle Browser mit Ausnahme von IE9 zeigen bei Bedarf die Desktop-Site an. Mobile Browser zeigen das mobile Layout korrekt an. Das Problem mit IE9 ist, dass es auch das mobile Layout zeigt.

Wenn ich nun die Wörter "nur" und "screen" aus dem obigen Code entferne, zeigt IE9 die Desktopseite korrekt an. Das Problem ist, dann zeigen die mobilen Browser auch die Desktop-Site an. Ich habe etwas recherchiert und nichts zu diesem Thema gesehen. 

Danke fürs Lesen, 

John

19
John Hansen

Nur für den Fall, dass jemand SO nach einer Antwort darauf sucht, lösen die obigen beiden Antworten das Kernproblem, das hier beantwortet wird, nicht. - CSS-Medienabfrage funktioniert nicht in IE 9

Grundsätzlich funktionieren Inline-CSS3-Medienabfragen in IE9, aber Sie müssen den Compatibilty-Modus deaktivieren.

<meta http-equiv="X-UA-Compatible" content="IE=9">

Das obige Meta-Tag muss vor allen anderen Meta-Tags vor platziert werden. Andernfalls aktiviert der IE9 den Kompatibilitätsmodus und funktioniert nicht.

32
Scott Sword

Soweit ich das beurteilen kann, kommt es darauf an, dass der IE9 nicht "min-device-width" und "max-device-width" interpretiert. 

Gemäß http://msdn.Microsoft.com/library/ms530813.aspx unterstützt es diese Eigenschaften nicht, nur "min-width" und "max-width".

http://www.w3.org/TR/css3-mediaqueries/#error-handling gibt außerdem an, dass der Browser Eigenschaften ignorieren soll, die er nicht erkennt. Nicht so bei IE9 scheint es.

7
benklocek

Ja, verwenden Sie @media (max-width: 860px) anstelle von max-device-width.

IE 9 hat mir gerade einen Herzinfarkt gegeben. Die Projektmedienabfragen funktionierten nicht. 

Nach ein paar Minuten Googeln müssen Sie das CSS dann in den HTML-Code einfügen. 

Was für ein Widerstand diese IE Browser sind!

5
bernhard

Ich füge das normalerweise zu meinen Projekten hinzu und es hat bisher für mich gearbeitet:

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
2
Diego

Der IE-Kompatibilitätsmodus löst das Problem . Wechseln Sie zu Compatibility View Settings und deaktivieren Sie die Option Intranet-Sites in Compatibility View anzeigen.

0
stpolit