knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

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);