私のindex.htmファイル<style>内のブロックに次のメディアクエリがあります....<head>
@media screen and (min-width: 40.5em) {
header[role="banner"] {border:solid 1px red;}
}
しかし、IE10 では、ページの読み込み時にヘッダーの周りに赤い境界線が表示されません。そのメディア クエリからスタイルを取得すると、IE はページのリロード時に赤い境界線を処理します。
ページの読み込み時にこれを IE10 に表示する秘訣は何ですか?
また...私は私の中に次のセットを持っています
<head>
...
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
...
</head>
px も機能しません...
@media only screen and (max-device-width: 100px) {
header[role="banner"] {border:solid 1px red;}
}
全く見せない...
アップデート
私は何が起こっているのかを理解しました。私のスタイルブロック内には、次のCSSコードがあります...
@media screen and (min-width: 5em) {
//various css rules for mobile view
}
そしてそのすぐ下に....
@media screen and (max-width: 40.5em) {
//various css rules for desktop view
}
Chrome はデスクトップ ブラウザでこれを理解し、2 番目のメディア クエリを読み取ります。しかし、IE10 は最初のものでスタックします。私の目標は、モバイル ファーストのアプローチを採用することですが、画面サイズが大きい場合に IE がスタックすることはありません。それは私の問題です...
最初のメディア クエリを削除すると、2 番目のメディア クエリが IE で動作します。どうすれば両方を保持し、大きな画面で最初のものを無視することを IE に知らせることができますか?