IE9の開発者ツールででスマートフォンサイト開発(主に、Windows Phoneのために)

エミュレーターや実機で検証の前にWindows Phoneの検証にIE9が非常に役立ちます。IE9の開発者ツールでユーザーエージェントをWindows Phoneに指定すればIE9でスマートフォン向けのサイトの検証等ができます。

スマートフォンサイト作成でPCのブラウザでユーザーエージェントを変えて検証するというテはよく使うかと思います。スマートフォンサイトだとiOSとAndroidが中心なので、私はよくSafariを使用します。Safariの開発者メニューは非常に便利ですよね。IE9の開発者ツールはそれに近いです。

ちなみに、Safariの開発者メニューに関しては下記のエントリーが参考になります。
Safariの開発者メニューでスマートフォン開発[to-R]

iOSやAndroidの場合は、Webkitなのでよいのですが、Windows Phoneの場合はそうもいきません。CSS3の対応度がiOSやAndroid比べても低いですし、JavaScriptの挙動も多少は異なったするからです。

しかし、幸いにもWindows Phoneは、IE9ベースとなるためIE9で表示・動作されれば問題ないとみてよいかと思いますので、Windows Phoneの検証時には、[IE9]→[Windows Phoneエミュレーター]→[実機]の順で行なっています。

開発者メニューの表示は、「F12」を押すか、下記図のようにメニューから「開発者メニュー」を選択して表示します。

ユーザーエージェントを変更するには、下記の手順を行います。

[ツール]→[ユーザーエージェントの文字列を変更]→[カスタム]

そうすると下記図のようなボックスが表示されます。

その入力欄にWindows Phoneのユーザエージェント(auからでているIS12T参照)は下記になるので、下記の文字列を「ユーザーエージェントの文字列」に入力します。

Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; FujitsuToshibaMobileCommun; IS12T; KDDI)

先ほど、入力したものが表示されます

こいつをクリックするとWindows Phoneのユーザエージェントに切り替わります。 開発者メニューすべてが使えますので、CSSやJavaScriptのデバッグを行いやすくなり、効率も上がります。