しばやん雑記

Azure とメイドさんが大好きなフリーランスのプログラマーのブログ

Windows Phone 8.1 Update で Internet Explorer 11 の User-Agent が大きく変わっていた件

Lumia Cyan が落ちてくる前に Windows Phone 8.1 Update の開発者向けプレビューが落ちてきてしまいました。Windows Phone 8.1 Update については公式ブログを参照してください。

既に Windows Phone で有名なかずあきさんもブログに書いてますね。

個人的には Windows Phone 8.1 Update で追加された機能の中で Internet Explorer 11 に関する部分に興味がありました。特に IE Blog にも書かれていたこれです。

The Mobile Web should just work for everyone - IEBlog - Site Home - MSDN Blogs

Windows Phone 8.1 Update をインストールすると、今までは最高にしょぼかった Twitter など iPhone と Android にしか対応していないサイトも綺麗に表示されるという話でした。

最初にこのエントリを読んだ時に、どのような仕組みになっているのか気になったので User-Agent を確認したところ、以下のようになっていることがわかりました。

Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 1320) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537

デスクトップ向け Internet Explorer 11 では User-Agent に Mozilla/5.0 や like Gecko といったトークンが追加され、MSIE が削除されたことは記憶に新しいですが、モバイル向けには iPhone や Android に似せた User-Agent に変更されたようです。

基本的にモバイルかどうかの判別は、iPhone や Android といった固有のトークンを識別するのではなく、"mobile" というトークンが入っているかどうかで判別することをお勧めしていました。

function isMobile() {
    return navigator.userAgent.toLowerCase().indexOf("mobile")>=0;
}

ちなみに同じ処理を ASP.NET MVC の Display Modes で実現する場合には、以下のようなコードを追加することで対応可能です。

DisplayModeProvider.Instance.Modes.Clear();

DisplayModeProvider.Instance.Modes.Add(new DefaultDisplayMode("Mobile")
{
    ContextCondition = context => context.Request.UserAgent.ToLower().Contains("mobile")
});

DisplayModeProvider.Instance.Modes.Add(new DefaultDisplayMode());

他には古い形式の WebKit のベンダープリフィックス付きのプロパティを、リダイレクトするような実装などが追加されているようです。

実際問題として -webkit- から始まるプロパティを IE が実装するのは良くない流れだと思うのですが、残念ながらサイト側が -webkit- や -moz- に依存しまくってるので仕方ないのかもしれません。