构建触摸友好网站的指导原则

在 Windows 8 Consumer Preview 中，使用 IE10 可以实现快速流畅的多点触控的 Web 体验。在未对网站进行更改的情况下，绝大多数网站均可适用 IE10 中的触摸功能。本博文提供了四个简单指导原则来确保您使用触控功能的客户能以最有效的方式使用您的网站。

我们在以前的博文中撰写了如何使用新的输入设备和触摸屏幕将 Web 体验变得更为有趣，并且更具交互性和沉浸感。我们还讨论了在 IE 10 中确保不迁就浏览体验的重要性，以便在真实的 Web 中获得出色的触控操作体验。

在下面的四个指导原则中，前两个用于确保触控用户可以访问您网站中的所有功能。后两个提供了通过触控功能使您的网站变得更易于使用的提示。

鼠标可以悬停在某内容上（指向内容）而不将其激活（单击内容）。但是，就触控而言，点击则意味着一次性完成悬停和激活两种操作。因此，触控用户无法完成需要悬停而不激活的功能。相反，触控操作必须将所有行为依托于单击（点击）操作。

用户希望能够使用触控功能来平移和缩放网站。因此，浏览器将默认使用触摸移动、收缩和双击交互，而不发送这些交互的事件。如果您的网站需要为这些交互提供特殊功能，则您必须配置 IE10 来使其仅提供您需要的默认行为（如果存在）。

当用户触摸某个元素时，-ms-touch-action CSS 属性可以确定 IE10 提供的默认行为。

-ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;

下表中描述了五种可能的值。

值	描述
`auto`	浏览器可以确定元素的行为。这是 `-ms-touch-action` 的默认值。
`none`	不允许默认行为。
`manipulation`	仅允许平移、收缩和滑动以向前或身后导航。
`double-tap-zoom`	仅允许双击缩放。
`inherit`	元素从其父元素继承 `-ms-touch-action` 的值。

例如，画布绘画应用程序可能会使用：

canvas {

-ms-touch-action: double-tap-zoom;

}

使用该配置，用户可以通过双击放大 canvas 元素，而滑动手指将向画布发送事件，而不是平移页面。

IE10 引入了 HTML5 输入控件支持，所有这些控件均已进行触摸优化。就文本输入而言，您可以在适用时识别特定的输入类型来进一步提升用户的触控体验。在 Windows 8 中，Internet Explorer 将针对您的输入类型显示定制的触摸键盘布局：

触摸键盘将针对电子邮件地址显示 @ 和“.com”按钮。

触摸键盘将针对电话号码显示数字键盘。

触摸键盘将针对 URL 显示正斜杠和“.com”。

为了构建 Windows 8 的触控优先体验，我们进行了大量的研究来为开发人员制定一些有用的指导原则。手指的平均宽度为 11 毫米。随着点击目标不断增大，意外未命中点击所占的百分比将快速下降。

在理想的情况下，目标尺寸应至少为 11 平方毫米（约 40 像素），并且周围应带有 2 毫米（约 10 像素）的边距。

如果仅希望为具有触摸硬件的用户调整间距，则可以使用功能检测。

如果要检测具有触摸硬件的用户，请使用：

if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {

// Supports multi-touch

}

基础知识外的扩展操作

您可以在创建出色的触控优化体验方面执行更多的操作。例如，您可以通过支持自定义的多点触控交互或手势来进行触控优化。以下是帮助您着手相关工作的一些链接：

我计划在将来的博文中撰写有关这些方法的更多内容。目前应用这些指导原则将能够确保您的网站可以在 IE10 中可与触控功能进行良好的交互。

—Internet Explorer 项目经理 Jacob Rossi