メディアクエリを使用してタブレットをターゲットにしてIE9をターゲットにしない方法

IE9が自分のサイトでタブレットスタイルを採用していることがわかりました。メディアクエリを使用してタブレットをターゲットにして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 */ 
}

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

いくつかの調査を行ったところ、次の質問/解決策が見つかりました。なぜこれが起こっているのかについての説明があります。私が言うことができるものから、

Media query not working in IE9

、それは "MIN-デバイス幅" と "MAX-デバイス幅を" の解釈ではないIE9にダウンしています。

http://msdn.microsoft.com/library/ms530813.aspxによると、は「min-width」と「max-width」のみをサポートしていません。また

、http://www.w3.org/TR/css3-mediaqueries/#error-handling は、ブラウザがそれが認識しない性質を無視することになっていると述べています。 IE9ではそうではないようです。

私もこの質問を見つけました：Common breakpoints for media queries on a responsive siteしかし、私には解決策はありません。

スタイルシートはタブレットにのみ適用できますが、1024px幅のIE9などのデスクトップブラウザには適用できません。

出典

2013-03-15 Tom

あなたは、ドキュメントの<head>でこのmetaタグを追加する必要があります。

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

をしてから、CSSに置き換えることができる：

min-device-widthをmin-width
max-device-widthでmax-widthと。

出典

2013-03-15 13:36:24 tw16

@Tom：このソリューションは役に立ちましたか？ – tw16

ええ助けて、私はあなたがupvoted持っていることができることを認識していませんでした。私はまだ他のブラウザがタブレットスタイルを取っていたことがわかった。私が思いついた解決策は、https://github.com/barisaydinoglu/Detectizrでタブレットを検出し、スタイルシートを手動で読み込むことでした。さらなる研究をするつもりだった – Tom

私は申し訳ありませんが、私は質問を誤解しました。私はあなただけがタブレットに適用され、タブレットと同じサイズのスクリーンを備えたコンピュータには適用されないことをあなたが理解していませんでした。興味のない場合は、特にタブレットをターゲットに設定する理由はありますか？タブレットのスタイルは、小型のコンピュータ画面と同じくらい有用ではないでしょうか？ – tw16

メディアクエリを使用してタブレットをターゲットにしてIE9をターゲットにしない方法

答えて

関連する問題