n2p blog

キャンペーンやSNSの
“ためになる”情報を
執筆しています。

Internet Explorer11にてF12 開発者ツールのエミュレーションが使いづらい件

マイマシンがWindows8.1に更新されました。
それに伴い、IEもIE11と進化されまして。
日々の作業や調べ物でIEなんぞ開きたくもないですが、
お客さまのサイトを制作する際にはどうしてもIEでチェックをしなければなりません。
特にIE8はブラウザ表示がモダンブラウザと違う場合が多いわりに
クライアント様がIE8の場合が多いので、しっかりとチェックしなければなりません。

今までは実機以外でIE8を見る場合、IEの開発者モードを使用していた

IE10で、開発者モードからドキュメントモードでInternet Explorer8を選べば、
結構な精度でエミュレーションしてくれてました。
制作作業の中チェックして行く場合には開発者モード
納品直前チェックは実機(Windows XP+Internet Explorer8)にて確認の流れです。
Image27_s
こんな感じ。

IE11のドキュメントモードではUI含め刷新

じゃあIE11になって何が変わったのか。
コチラの記事で詳しく説明しております。
【特別企画】Windows 8.1 徹底解剖 第4回 「Internet Explorer 11」(後編) – 窓の杜
UIも含めてだいぶパワーアップしたInternet Explorer11のF12 開発者モードなんですが、
Internet Explorer11_2
今回もエミュレーションがあり、ドキュメントモードもありました。
これを「8」に変更すると…
Internet Explorer11
なんじゃこりゃあー!
ズレっズレやないかい!
コレは今すぐ制作とディレクターをぶん殴らなくては!すわ!
と思う前に実機で見ると、実に普通。
なんでこうなったのか。

IE11のドキュメントモードではブラウザだけではエミュレートできない

見出しの通り、HTMLファイル側の
Head内にmetaタグを入れてあげなければエミュレートできません。
[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][xhtml] <!–[if IE]>
<meta http-equiv=”X-UA-Compatible” content=”IE=IE8″>
<![endif]–>
[/xhtml] こいつをいれてやると無事動きます。
これ毎回入れたり消したりしなくちゃいけないの…?
何考えてるの?馬鹿なの?
やっぱりIEがこの世から無くなって欲しいと思うこの熱いパッションは変わらないようです。[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]