IEでviewportが無視される
<meta name="viewport" content="width=device-width">が無視される
最新版のIE(特にWindowsPhoneやSurfaceなどのモバイル端末)において、viewportの指定が無視されることがあります。
すなわち、viewportのサイズが端末の画面サイズではなく、端末の解像度そのままになってしまい、モバイルなのに大画面用のスタイルが効いてしまいます。
そればかりかJavaScriptで取得した画面サイズですら、端末の解像度に基づいたサイズになってしまうので、大画面用のJSが実行されるなどしてしまいます。
これを回避するには、次の指定をCSSに追加します。
@-ms-viewport { width: device-width; }
これで、端末の画面サイズがviewportのサイズになるため、端末の画面サイズに合わせたスタイルやJSが適用されます。もちろん回転にも対応。
そしてmetaでの場合同様に、具体的な数値を指定することも可です。
ちなみにJSでデバイスの解像度を取得する方法は次の通りです。
document.write(window.devicePixelRatio);