IEでメディアクエリーが作動しない

WEBサイトのデザインをする時には、各種ブラウザでの動作を確認しなければなりませんね。

結構IEでしか作動しないタグやIEでは効かないスタイルがあったりします。

しかし、IEもバージョンごとに動作が違っているし・・・※IEはもう最新版(11）だけ追従しておけばよいと思いますが、今度はMicroSoftの｢Edge｣での動作確認が必要になってくるわけで。
他にChromeとFirefoxは確認必須ですから、シビアなデザインをしている時は結構大変ですね。

で、今回、ハマった・・・orz

スマホ対応のレスポンシブデザインについて書きましたが、ど～～～してもＩＥで狙ったような動作をしてくれない。（他のブラウザではすべて正常動作する、MSのEdgeも正常）

色々いろいろ確認してみて、最終的にIEの独自仕様かと言う疑いが出て来たので調べてみたら・・・

原因はＩＥの｢互換表示｣機能でした。。。orz

ＩＥが互換モードになっていると、メディアクエリーが作動しない模様。

  ↓↓↓ ↓↓↓ ↓↓↓ ↓↓↓

互換モードオフを強制するように、ヘッダにメタタグを追記すればOKのようです。

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