如何让网站构建友好的IE10触摸使用体验
在 Windows 8 Consumer Preview 中，使用 IE10 可以实现快速流畅的多点触控的 Web 体验。在未对网站进行更改的情况下，绝大多数网站均可适用 IE10 中的触摸功能。本博文提供了四个简单指导原则来确保您使用触控功能的客户能以最有效的方式使用您的网站。以保证平板设备用户在浏览你的网站时可获得更友好的使用体验。
我们在以前的博文中撰写了如何使用新的输入设备和触摸屏幕将 Web 体验变得更为有趣，并且更具交互性和沉浸感。我们还讨论了在 IE 10 中确保不迁就浏览体验的重要性，以便在真实的 Web 中获得出色的触控操作体验。
在下面的四个指导原则中，前两个用于确保触控用户可以访问您网站中的所有功能。后两个提供了通过触控功能使您的网站变得更易于使用的提示。
不要在鼠标悬停操作背后隐藏内容
鼠标可以悬停在某内容上（指向内容）而不将其激活（单击内容）。但是，就触控而言，点击则意味着一次性完成悬停和激活两种操作。因此，触控用户无法完成需要悬停而不激活的功能。相反，触控操作必须将所有行为依托于单击（点击）操作。
配置浏览器以使其提供适用于网站的默认触控行为
用户希望能够使用触控功能来平移和缩放网站。因此，浏览器将默认使用触摸移动、收缩和双击交互，而不发送这些交互的事件。如果您的网站需要为这些交互提供特殊功能，则您必须配置 IE10 来使其仅提供您需要的默认行为（如果存在）。
当用户触摸某个元素时，
例如，画布绘画应用程序可能会使用：
触摸键盘将针对电子邮件地址显示 @ 和“.com”按钮。
触摸键盘将针对电话号码显示数字键盘。
触摸键盘将针对 URL 显示正斜杠和“.com”。
请为用户的手指提供充裕的空间
-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 元素，而滑动手指将向画布发送事件，而不是平移页面。
识别使用 HTML5 表单的输入类型
IE10 引入了 HTML5 输入控件支持，所有这些控件均已进行触摸优化。就文本输入而言，您可以在适用时识别特定的输入类型来进一步提升用户的触控体验。在 Windows 8 中，Internet Explorer 将针对您的输入类型显示定制的触摸键盘布局：
触摸键盘将针对电子邮件地址显示 @ 和“.com”按钮。
触摸键盘将针对电话号码显示数字键盘。
触摸键盘将针对 URL 显示正斜杠和“.com”。
请为用户的手指提供充裕的空间
为了构建 Windows 8 的触控优先体验，我们进行了大量的研究来为开发人员制定一些有用的指导原则。手指的平均宽度为 11 毫米。随着点击目标不断增大，意外未命中点击所占的百分比将快速下降。
在理想的情况下，目标尺寸应至少为 11 平方毫米（约 40 像素），并且周围应带有 2 毫米（约 10 像素）的边距。
| 40 像素或更多的目标尺寸 | |||
| 10 像素或更多的目标间距 | |||
如果仅希望为具有触摸硬件的用户调整间距，则可以使用功能检测。
如果要检测具有触摸硬件的用户，请使用：
if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {
// Supports multi-touch
}
全民摄影安卓版
影视达人官方版
帮搜作业题官方版
普通话发音测试官方版
萌新安卓版
催眠曲婴儿安卓版