是龙王庙总免不了要被大水冲

最近知乎上出现一篇名为《如何评价阿里巴巴「误杀」 Windows Phone 8.1 GDR1 的 IE 11 触屏页面？ 》的提问。起因是最近淘宝把移动触屏网站升级了，然后一些Windows Phone手机的用户就发现再也不能打开http://m.taobao.com。既没有进入之前的触控版本，也没有进入传统移动版网站的页面。

如何重现问题？

用Windows Phone 8.1 GDR1 版本的 IE 11打开http://m.taobao.com。或者用桌面版本的IE11打开http://m.taobao.com，并把User Agent String设为“Apple Safari(ipad)”。IE11停留在起始页面，但不能获得实际内容。

哪些浏览器出了问题？

只有Windows Phone 8.1 GDR1 的 IE 11出了问题。其他IE没有问题，包括桌面版本和没有打上GDR1的Windows Phone 8.1 IE 11。因为GDR1目前还没有General Available，所以受影响的主要是启用开发者预览的用户。考虑到启用开发者预览的用户不一定是开发者，还包括社区Geek，故其影响面还是不小的。

阿里员工的回应

读起来，真的很有误杀友军，大水冲了阎王庙的感觉。作为一个同样做前端的人，真的很理解“前端真是苦逼啊”这句话。

问题原因分析

期望的流程应该是怎么样的

当打开http://m.taobao.com时，iphone用户能够进入触控版本页面：

其他手机获得的页面如下。提示下载app。

使用GDR1的IE 11的结果

Windows Phone 8.1 GDR1的用户打开http://m.taobao.com的页面后，得到的是iPhone版本的起始页面，而不能进入内容页面。如下所示，目前阿里在此页面提供了切换地址，作为临时的变通：

如果用IE的F12工具，可以看到IE在下面的代码处报错：根据HTML5的规范，windows.history.replaceState接受3个参数，其中前2个参数必不可少。但是此处代码使用了Safari未符合HTML5标准的实现，代码调用replaceState函数时，只提供了1个参数，导致IE报Argument not optional错，并卡壳在起始页面。

为什么只有GDR1上的IE11出问题

淘宝移动触控网站根据客户端提交的User Agent字符串信息，返回不同的页面。我们无从窥探服务器端的代码，但是可以用如下来自同一个页面的客户端的JavaScript代码来做一个类比。这是一个典型的User Agent Detect写法：

    <script type="text/javascript">
        (function(){
            var download = document.getElementById('download');
            var ua = navigator.userAgent;
            var url;
            if(ua.match(/Windows\sPhone/i) !=null){
                url = "http://www.windowsphone.com/zh-cn/store/app/%E6%B7%98%E5%AE%9D/0cf7aa5c-5b08-42f4-9d4e-80684c304abc";
            }
            else if(ua.match(/iPhone|iPod/i) != null){
                url = "http://itunes.apple.com/app/id387682726?mt=8";
            }
            else if(ua.match(/Android/i) != null){
              
                url = "http://download.taobaocdn.com/wireless/taobao4android/latest/taobao4android_10000575.apk";
                
            }
            download.onclick = function(){
                if(url){
                    location.href = url;
                }
            }
        })();
    </script>

而为了适配既有的网站，新版本IE对自己的UA字符串进行了扩充。从老版本IE11类似下面这样的形式

Mozilla/5.0 (Windows Phone 8.1; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; Microsoft; Virtual) like Gecko

变成为

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

新字符串包含了Android，iPhone这样的字段。所以如果网站（比如这次的http://m.taobao.com）采用UA字符串检查的方式来决定返回的内容，最新版IE11就会被识别为iPhone或者Android，从而得到iPhone适配的内容。

为什么IE11要把自己“伪装”成iPhone？

需要首先指出的是，阿里工程师的理解并不完全正确，IE并没有对http://m.taobao.com做了特别的适配，而是从Windows Phone 8.1 GDR1开始，对任何网站都使用新的UA字符串。

该字符串潜在的会让IE11得到为iPhone设计的内容的，从而让Windows Phone用户获得更好的体验。IE11是一个现代化而可靠的HTML5实现，所以对于大多数基于HTML5标准的网站，这样做其实并不会带来兼容性问题。正所谓，英雄不问出处；别问我是谁，请给我HTML5。正因为这样，才有了阿里工程师说的：“我们其实不知道IE反向兼容了手机淘宝web版这事，……”根据前面的技术分析，这次出问题，和更新过的代码含有不符合HTML5规范的内容有关。

写在最后

我个人完全理解阿里工程师的出发点，特别是考虑到之前iPhone在大陆的地位。只是很多事情在悄悄地改变，单独为一款手机开发网站，已经不那么符合现实的需求了。这次知乎上的热烈反馈正说明了Windows Phone社区的日趋活跃。作为一个开发者，如果你开始抬起自己原先埋在“如果你没有iPhone就没有iPhone”的沙堆中的头，观察周遭的变化，并开始严肃地对待这个问题，请不妨参考：The Mobile Web should just work for everyone 中的建议，迈出多平台HTML5移动网站适配的第一步。