Chia sẻ qua

移动 Web 应该人皆适用

  • Bài viết

更新日期：2014 年 8 月 4 日 - 开发人员现在可以通过加入 Windows Phone Preview for Developers 或下载 Windows Phone 8.1 更新模拟器预览这些更新。本博文中描述的平台更改的详细信息可以在 MSDN 上找到。我们还发布了经过更新的最佳实践，介绍如何更新定制的网站以支持相关标准。

Windows Phone 8.1 更新包括数百项 Internet Explorer 11 增强功能，可大大提高与移动 Web 的兼容性。

根据您的反馈，我们致力于为 IE 用户提供与 iOS 和 Android 设备一致的 Web 使用体验 – 即使这意味着我们需要添加非标准 Web 平台功能。我们相信，运行当今标准化程度较低的移动 Web 是一种更加注重实效的方法。

我们测试了超过 500 个热门移动网站，发现 IE11 更新可改善其中 40％ 以上网站的体验。

例如，如果使用 IE11 访问 www.twitter.com，过去您看到的是：

使用 Windows Phone 8.1 看到的 www.twitter.com 的屏幕截图

Windows Phone 8.1

在包含该更新的 IE11、Firefox OS 和 iPhone 上看到的是：

使用 Windows Phone 8.1 更新看到的 www.twitter.com 的屏幕截图

Windows Phone 8.1 更新

使用 Firefox OS 看到的 www.twitter.com 的屏幕截图

Firefox OS

使用 iPhone 看到的 www.twitter.com 的屏幕截图

采用 iOS7 的 iPhone

同样，如果使用 IE11 和 Firefox OS 访问 www.baidu.com，您看到的是：

使用 Windows Phone 8.1 看到的 www.baidu.com 的屏幕截图

Windows Phone 8.1

使用 Firefox OS 看到的 www.baidu.com 的屏幕截图

Firefox OS

在包含该更新的 IE11 和 iPhone 上看到的是：

使用 Windows Phone 8.1 更新看到的 www.baidu.com 的屏幕截图

Windows Phone 8.1 更新

使用 iPhone 看到的 www.baidu.com 的屏幕截图

采用 iOS7 的 iPhone

分析最热门网站

与主要基于标准的“桌面”Web 不同，许多现代移动网页都是针对 iOS 和 iPhone 设计和构建的。这导致其他设备的用户通常会获得降级的体验。

几周前我们讨论了我们对 Web 的愿景和优先任务。我们认为，“Web 应该人皆适用 – 用户、开发人员和企业都包括在内。”我们已开始研究可采取哪些措施让移动 Web 对我们的客户“正常运行”。

当我们对世界各地最热门的移动网站进行调查时，我们开始看到导致问题的常见模式。通常，网站会使用编写粗劣的浏览器检测代码，这会导致 Windows Phone 用户获得桌面网站体验。桌面网站通常较大并且加载速度更慢，从而耗费用户更多的流量额度。到头来，这些网站的文字极其微小，您必须花大量时间缩放和平移才能阅读内容。它们还预期您使用鼠标，因此菜单和窗体很难使用。

当 Windows Phone 8.1 到达 RTM 阶段时，它包含了同样快速、基于标准的 IE11 浏览器引擎，以支持桌面上 IE 的 PC 版本。过年几年，我们讨论了如何使用功能检测和优雅降级向所有浏览器提供相同的标记。尽管我们仍不时会看到因没有遵守此指导原则而中断的桌面网站，但这种情况在桌面上已有所改善。我们在移动 Web 上发现了一种非常不同的情况。许多网站通过旧的供应商特定前缀使用功能，而不支持不带前缀的标准版本或只支持某些设备的供应商前缀。而其他网站则使用只适用于 Safari 或 Chrome 的专有非标准 API。当然，IE 中也有缺陷或缺失的功能，它们在专为我们竞争对手的浏览器设计的移动网站上尤其明显。

在 Windows Phone 8.1 更新中更新 Internet Explorer

我们收集了所有此类兼容性数据，然后开始计划应该对 IE 进行哪些更改。本博文的其余部分将讨论一些最重要的更改以及我们进行这些更改的理由。影响移动网站的问题主要分为五大类：

  • 不完善的浏览器检测不能将 IE 识别为移动浏览器并提供桌面体验
  • 只使用已被标准取代的带 webkit 前缀的旧功能
  • 使用不存在相关标准的带 webkit 前缀的专有功能
  • 使用 IE 不支持且没有正常回退方案的功能
  • 遇到 IE 中的互操作性缺陷和实施差异

更改用户代理字符串

我们发现的最重要问题之一是，网站不能将 Windows Phone 上的 IE 检测为移动浏览器并因此提供桌面内容。这通常导致网站以极小的文字显示，您需要放大才能阅读，并不停地来回平移。通常这还意味着会有更多数据通过手机的数据连接进行传输，因为内容没有针对移动平台进行优化。图像较大，并且会下载和显示更多广告。

网站可通过许多种不同的方法来检测是否提供移动体验。下面是我们在一个真实网站上发现的此类检查方法：

window.mobileCheck = function() { var check = false; (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; }

我们更新了 Windows Phone 上 IE 中的用户代理字符串，以增加能够正确交付最佳移动内容的网站的数量。这延续了所有浏览器都必须处理、大多数 Web 开发人员都曾遇到过的一种困扰。例如，早在 2006 年初，就有一个有关 WebKit 缺陷的有趣讨论，题为“Safari 是个大骗子。将它自身报告为 Mozilla、Gecko 和 KHTML。”当我们在桌面上推出 IE11 时，我们向字符串中添加了标记“like Gecko”，因为它大幅改善了与桌面网站的兼容性。Chrome 和 Opera 也声称像 Gecko 和 Safari，以便与 Web 内容兼容。

如果使用 IE11 和 Firefox OS 访问 www.hawaiianairlines.com，您会获得桌面浏览体验：

使用 Windows Phone 8.1 看到的 www.hawaiianairlines.com 的屏幕截图

Windows Phone 8.1

使用 Firefox OS 看到的 www.hawaiianairlines.com 的屏幕截图

Firefox OS

在包含该更新的 IE11 和 iPhone 上看到的是：

使用 Windows Phone 8.1 更新看到的 www.hawaiianairlines.com 的屏幕截图

Windows Phone 8.1 更新

使用 iPhone 看到的 www.hawaiianairlines.com 的屏幕截图

采用 iOS7 的 iPhone

如果使用 IE11 和 Firefox OS 访问 www.nytimes.com，您也会获得桌面浏览体验：

使用 Windows Phone 8.1 看到的 www.nytimes.com 的屏幕截图

Windows Phone 8.1

使用 Firefox OS 看到的 www.nytimes.com 的屏幕截图

Firefox OS

在包含该更新的 IE11 和 iPhone 上看到的是：

使用 Windows Phone 8.1 更新看到的 www.nytimes.com 的屏幕截图

Windows Phone 8.1 更新

使用 iPhone 看到的 www.nytimes.com 的屏幕截图

采用 iOS7 的 iPhone

通常情况下，我们的建议是开发一个响应迅速且能够根据不同设备的功能进行调整的网站。如果您选择构建移动特定的体验，那么我们建议在用户代理字符串中寻找子字符串“mobile”，以确定何时交付针对移动平台优化的内容：

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

将带 webkit 前缀的旧功能映射到 IE 实现中

更改用户代理字符串以便 IE 能够接收与其他手机浏览器相同的内容后，我们就可以开始分析破坏移动体验的问题。我们发现的第一个重要问题是，许多移动网站只针对 CSS 渐变、弹性框、过渡和动画发送带 webkit 前缀的内容。对于使用跨浏览器标记的网站，IE11 的基于 Web 标准的引擎已经支持这些功能。正如 Mozilla 发现的那样，WebKitCSSMatrix 在移动设备上非常常用。IE 支持 MSCSSMatrix。许多网站还使用 window.orientation 而不是新兴标准 screen.orientation。我们在这里发现的第二个问题是，网站还经常在它们的代码中使用旧语法。例如，使用旧渐变语法，而不是经过更新的基于标准的方法。

在 Windows Phone 8.1 更新中，我们添加了映射，以便将带 webkit 前缀的常用 API 映射到已经是 IE11 一部分的基于标准的支持。这意味着，只发送 WebKit 代码的网站在页面加载时将被转换为基于标准的代码。我们并未计划支持所有带 webkit 前缀的 API。我们只添加了在移动网站中非常流行，以至于没有它们网站就无法正常工作的那些 API 的映射。

如果使用 IE11 访问 www.macys.com，您看到的是：

使用 Windows Phone 8.1 看到的 www.macys.com 的屏幕截图

Windows Phone 8.1

这里，在包含该更新的 IE11 和 iPhone 上，您可以看到渐变已正确绘制：

使用 Windows Phone 8.1 更新看到的 www.macys.com 的屏幕截图

Windows Phone 8.1 更新

使用 iPhone 看到的 www.macys.com 的屏幕截图

采用 iOS7 的 iPhone

如果使用 IE11 访问 www.answers.com，您看到的是：

使用 Windows Phone 8.1 看到的 www.answers.com 的屏幕截图

Windows Phone 8.1

这里，在包含该更新的 IE11 和 iPhone 上，您可以看到网站已正确绘制：

使用 Windows Phone 8.1 更新看到的 www.answers.com 的屏幕截图

Windows Phone 8.1 更新

使用 iPhone 看到的 www.answers.com 的屏幕截图

采用 iOS7 的 iPhone

添加对专有非标准功能的支持

我们发现，少数非标准功能很受 Apple 欢迎并在 iPhone 上广泛使用。这些功能当前不属于标准类别，但不支持它们的浏览器将无法为移动 Web 上的主要网站提供良好体验。其中一个示例是 -webkit-appearance，它使页面能够修改元素的样式以便与本机应用程序相匹配。正如 Mozilla 指出的，“它不仅不标准，而且其行为在不同的浏览器之间也会发生变化。”遗憾的是，如果不对这些专有的非标准功能提供某种级别的支持，网站就会变得更难使用。

IE 中支持的新功能

有几个基于标准的功能 IE 原来并不支持，并且在桌面网站中很少使用，但在移动 Web 中却非常常见。当我们让 IE11 接收更多移动内容时，我们就已经确定，我们将需要添加这些功能。例如，window.locationbar 在 HTML5 中定义，但在桌面网站上极少使用。我们已经基于这些新功能支持的移动网站，优先实现了几项新功能。

其中一个与 API 相关且影响与移动网站兼容性的较大问题是对触控的支持。在 IE10 中，我们提供了对指针事件的支持，该事件现已成为 W3C 的备选建议。在 IE11 中，我们更新了该事件的实现方式以纳入规范变更。通过利用指针事件，希望使用鼠标、触控、手写笔或其他指针输入设备的网站会获得许多性能和功能方面的优势，对于适用于用户所有设备的网站，我们会继续推荐此事件作为最佳 API。

在移动 Web 上，大多数网站都经过编码，以使用较旧的触控事件模型，并且用户预期这些网站能够正常工作。在 IE11 更新中，我们添加了对触控事件的支持，以便这些网站能够正常工作。我们的研究表明，在桌面 Web 上，对同时支持鼠标的设备（如 Windows 平板电脑和二合一设备）启用触控事件会导致更多问题。例如，我们发现，当启用触控事件时，大约 10% 的热门网站不再支持鼠标和触控板。许多网站预期不会同时收到触控事件和鼠标事件，并只支持其中一种事件。我们已经加入了 W3C 触控事件社区小组中其他浏览器供应商的队伍，共同致力于在更大范围内解决 Web 的这些问题。我们已经在此博文中发布了有关指针和触控事件的更多详细信息。

修改影响最大的互操作性问题

当我们继续调查在 Internet Explorer 中无法正常工作的网站中的标记时，我们发现了一些奇特的互操作性问题。例如，<a> 链接内的 <button> 和 <label> 元素可在其他浏览器中独立地进行单击，尽管任何位置都没有明确记录这一行为。另一个示例是 <meta> 刷新支持。HTML5 规范预期字符串“URL=”是元素内容的一部分才能重定向到不同的 URL。其他浏览器不要求此行为，并且当以这种方式错误使用时，IE 中的页面将显示为不断刷新。

最后，我们还在 Trident 引擎中发现了几个缺陷，这些缺陷对热门移动网站的影响尤其明显，我们已经在此更新中包含了这些问题的修补程序。例如，我们修复了location.hash 的一些导航问题和一些影响常用移动网站的 CSS 布局问题。

您可以做什么？

我们进行的许多更改都专门面向使用这些网站上发布的旧版或带供应商前缀的内容。支持所有带 -webkit- 供应商前缀的 API 不是我们的目标。虽然我们会继续我们的宣传工作，以鼓励这些网站采用基于标准的标记，但我们添加的支持目前来说是让移动 Web 正常工作必不可少的。如果您看到使用非标准代码的网站，也可以提供帮助：我们在 webcompat.com 上与 Mozilla 合作记录中断的网站。这些网站通常导致跨多个浏览器的问题，包括 Firefox 和 IE，您可以轻松报告有问题的网站。

如果您是一名 Web 开发人员，可通过 https://modern.ie 上的扫描程序工具运行您的网站。该工具将找出常见编码问题，包括供应商前缀问题，并帮助您修复代码。

总而言之，我们在 Windows Phone 8.1 更新中对 IE 所做的更改可大大改善与最热门移动网站的兼容性。该更新正在向已经采用 Windows Phone 8.1 Preview for Developers 的开发人员推广，并且在随后几个月中，还将向拥有运行 Windows Phone 8.1 的设备的消费者推广。我们还在 MSDN 上的 IE 开发人员指南中发布了所有更改的完整列表。

如有疑问，您可以在 Twitter @IEDevChat 上与我们联系。下一次 #AskIE tweet 聊天将在今天（7 月 31 日）的美国太平洋时间上午 10:00 到中午 12:00 进行。请确保在问题中包含 #AskIE。

Adrian Bateman
Internet Explorer 项目经理

Frank Olivier
Internet Explorer 项目经理