web-dev-qa-db-ja.com

メディアクエリがIE9で機能しない

IE9でのみ発生する奇妙な問題が発生しています。デスクトップレイアウトとモバイルレイアウトのあるWebページで作業しています。同じHTML、異なるCSS。問題は以下のコードで発生します：

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

IE9を除くすべてのブラウザーは、必要に応じてデスクトップサイトを表示します。モバイルブラウザはモバイルレイアウトを正しく表示します。 IE9の問題は、モバイルレイアウトも表示されることです。

上記のコードから「only」と「screen」を削除すると、IE9はデスクトップサイトを正しく表示します。問題は、モバイルブラウザもデスクトップサイトを表示することです。私はこれについていくつかの調査を行いましたが、この問題については何も見ていません。

読んでくれてありがとう、

ジョン

cssinternet-explorer-9mobile-websitemedia-queries
19
John Hansen

誰かがこれに対する答えを求めてSOをクロールしている場合に備えて、上記の2つの答えは、ここで答えられる中心的な問題を解決していません IEでCSSメディアクエリが機能しない9

基本的にインラインCSS3メディアクエリはIE9で機能しますが、互換モードを無効にする必要があります-

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

上記のメタタグは、他のすべてのメタタグの前に配置する必要があります。そうしないと、IE9はデフォルトで互換モードになり、その後機能しません。

32
Scott Sword

私が言えることは、IE9が「min-device-width」と「max-device-width」を解釈しないことです。

http://msdn.Microsoft.com/library/ms530813.aspx によると、これらのプロパティはサポートされておらず、「min-width」と「max-width」のみがサポートされています。

さらに、 http://www.w3.org/TR/css3-mediaqueries/#error-handling は、ブラウザが認識しないプロパティを無視することになっていることを示しています。 IE9ではそうではないようです。

7
benklocek

はい、_max-device-width_の代わりに@media (max-width: 860px)を使用してください。

IE 9は心臓発作を起こしました。プロジェクトメディアクエリは機能しませんでした。

その後、数分グーグル操作した後、CSSをHTMLに含める必要があります。インラインスタイルのみ！

これらのドラッグはなんとIEブラウザです！

5
bernhard

私は通常これを自分のプロジェクトに追加し、これまでのところ私のために働いています：

<!--[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

IE互換モードは問題を解決します。 互換表示設定に移動し、オプション互換表示でイントラネットサイトを表示を無効にします。

0
stpolit