8

IE9が私のサイトでタブレットスタイルを採用していることがわかりました。

@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait),
       (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{
    /* tablet styles */
}

上記のメディアクエリは、ブラウザの幅が1024pxの場合にIE9で適用されます。

いくつかの調査を行った後、私は次の質問/解決策を見つけました、そしてそれはこれが起こっている理由についての説明を提供します。

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

私の知る限り、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ではそうではないようです。

私もこの質問を見つけました：レスポンシブサイトでのメディアクエリの一般的なブレークポイントですが、それは私に解決策を与えません。

1024px幅のIE9のようなデスクトップブラウザではなく、タブレットにのみスタイルシートを適用するにはどうすればよいですか？

4

1 に答える 1

2

<head>ドキュメントの にこのメタ タグを追加する必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

そして、あなたのcssで次のものを置き換えることができます：

  • min-device-widthとmin-width
  • max-device-widthとmax-width。
于 2013-03-15T13:36:24.877 に答える