互动

手机等小屏设备通常配备触控屏。笔记本电脑和台式电脑等大屏设备通常配备鼠标或触控板等硬件。人们很容易将小屏幕与触控操作、大屏幕与指针操作划等号。

但现实情况要复杂得多。部分笔记本电脑具有触屏功能。用户可以与触摸屏、触控板或两者同时互动。同样，您也可以在平板电脑等触屏设备上使用外接键盘或鼠标。

不要尝试根据屏幕尺寸推断输入机制，而应使用 CSS 中的媒体功能。

指针

您可以使用 pointer 媒体功能测试三个可能的值：none、coarse 和 fine。

如果浏览器报告的 pointer 值为 none，则用户可能正在使用键盘与您的网站互动。

如果浏览器报告的 pointer 值为 coarse，则表示主要输入机制的准确性不高。触摸屏上的手指属于粗略指针。

如果浏览器报告的 pointer 值为 fine，则表示主要输入机制能够进行精细控制。鼠标或触控笔都是不错的指针。

您可以调整界面元素的大小，以适应 pointer 值。尝试在不同类型的设备上访问此演示网站，看看界面如何适应。

在此示例中，按钮针对粗略指针进行了放大：

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

您也可以缩小元素以适应精细指针，但请谨慎操作：

错误做法

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

即使有人拥有能够进行精细控制的主要输入机制，也要三思而后行，不要轻易缩小互动元素的大小。菲茨定律仍然适用。即使使用精细的指针，较小的目标也需要更专注地操作。无论使用何种指控设备，更大的目标区域都能让所有用户受益。

任何指针

pointer 媒体功能用于报告主要输入机制的精细度。但许多设备都有多种输入机制。用户可能会同时使用触摸屏和鼠标与您的网站互动。

any-pointer 与 pointer 媒体功能的不同之处在于，前者会报告是否有任何指控设备通过了测试。

any-pointer 值为 none 表示没有可用的指控设备。

any-pointer 值为 coarse 表示至少一个指控设备的精确度不高。但它可能不是主要输入机制。

any-pointer 值为 fine 表示至少有一个指控设备能够进行精细控制。但请注意，这可能不是主要的输入机制。

由于如果任何输入机制通过测试，any-pointer 媒体查询都会报告肯定结果，因此浏览器可能会报告 any-pointer: fine 的结果，同时报告 any-pointer: coarse 的结果。在这种情况下，媒体查询的顺序很重要。以最后一个为准。

在此示例中，如果设备同时具有精细和粗略输入机制，则应用粗略样式。

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

悬停

hover 媒体功能会报告主要输入机制是否可以将光标悬停在元素上。这通常意味着屏幕上存在某种光标，该光标由鼠标或触控板控制。

与区分精细指针和粗略指针的 pointer 媒体功能不同，hover 媒体功能是二元的。如果主要输入设备能够悬停在元素上，则会报告 hover 值。否则，该值为 none。

在此示例中，当鼠标悬停在元素上时，系统会显示一些补充图标，但前提是主要输入设备能够悬停在元素上。

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

如果您使用鼠标将光标悬停在该按钮上，系统会显示相应图标。但如果您使用键盘通过 Tab 键切换到该按钮，相应图标仍处于隐藏状态。使用键盘时，您会聚焦而不是悬停。连接了鼠标的桌面设备会报告说，主要输入机制能够悬停，这是正确的。但如果用户在连接鼠标的情况下使用键盘，则无法享受 :hover 样式的优势。因此，最好将 :hover 和 :focus 样式结合使用，以涵盖这两种互动。

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

即使主要输入设备能够悬停在元素上，也要谨慎地将信息隐藏在悬停互动后面。相应信息的曝光度会降低。请勿使用悬停来隐藏重要信息或重要的界面元素。

任何悬停

hover 媒体查询仅报告主要输入机制。有些设备具有多种输入机制：触摸屏、鼠标、键盘、触控板。

正如 any-pointer 会报告任何输入机制一样，如果任何可用的输入机制能够悬停在元素上，any-hover 将为 true。

如果您决定反转上例中的逻辑，则可以将悬停样式设为默认样式，然后在 any-hover 的值为 none 时移除这些样式。

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

在没有悬停功能的输入机制的设备上，额外图标始终可见。

虚拟键盘

用户使用光标和手指探索界面，但需要输入信息时，他们需要键盘。如果用户在设备上外接了实体键盘，这没什么问题，但如果他们使用的是触屏设备，情况就会稍微复杂一些。这些设备提供屏幕上的虚拟键盘。

输入类型

与实体键盘不同，虚拟键盘可以根据预期输入进行定制。如果您提供有关预期输入的信息，设备可以显示最合适的虚拟键盘。

HTML5 输入类型是描述 input 元素的绝佳方式。type 属性接受 email、number、tel、url 等值。

  <label for="email">Email</label>
  <input type="email" id="email">

  <label for="number">Number</label>
  <input type="number" id="number">

  <label for="tel">Tel</label>
  <input type="tel" id="tel">

  <label for="url">URL</label>
  <input type="url" id="url">

输入模式

Browser Support

• 66
• 79
• 95
• 12.1

Source

借助 inputmode 属性，您可以精细控制虚拟键盘。例如，虽然有一个值为 number 的 input type，但您可以使用 inputmode 属性来区分整数和小数。

如果您要询问整数，例如某人的年龄，请使用 inputmode="numeric"。

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

如果您要求的是包含小数位的数字（例如价格），请使用 inputmode="decimal"。

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

自动补全

没有人喜欢填写表单。作为设计者，您可以让用户自动填写表单字段，从而提升用户体验。autocomplete 属性可为您提供多种选项，用于改进联系表单、登录表单和结账表单。

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

这些 HTML 属性（type、inputmode 和 autocomplete）只是对表单字段的小小补充，但可以显著改善用户体验。通过预测和响应用户的设备功能，您可以为用户提供更好的体验。如需了解更深入的信息，您可以学习专门介绍如何学习表单的课程。

接下来，我们将学习一些常见的界面模式。

检查掌握情况

测试您对互动的了解程度

您应该使用哪项功能，而不是尝试根据屏幕尺寸推断用户的输入类型？

CSS 媒体功能

例如 @media (pointer: coarse) 或 @media (-any-pointer: coarse)

使用 JavaScript 的 prompt() 询问用户

不适合直接询问。

CSS 媒体类型 handheld

此功能已在媒体查询 4 中弃用。

@media (pointer) 和 @media (any-pointer) 有什么不同？

任何指针包括手指等指针。

指针已将触控作为输入类型。

指针不包括鼠标等内容。

指针确实包含鼠标作为输入设备。

当其他非主要输入源（例如触控笔）通过测试时，任何指针都会报告 true。

any-pointer 会查询所有设备输入类型以查找任何匹配项。

哪些输入类型会向用户显示更合适的虚拟键盘？

type="url"

键盘将提供按钮来支持输入网址。

type="tel"

键盘将提供用于输入电话号码的按钮。

type="number"

键盘将提供仅支持输入数字的按钮。

type="email"

键盘将提供用于支持输入电子邮件地址的按钮。