互動

手機等小螢幕裝置通常會配備觸控螢幕。筆電和電腦等大螢幕裝置通常會隨附滑鼠或觸控板等硬體。許多人會將小螢幕與觸控，以及大螢幕與滑鼠等配備畫上等號。

但實際情況更為複雜。部分筆記型電腦具有觸控螢幕功能。使用者可以透過觸控螢幕或觸控板 (或兩者皆可) 與應用程式互動。同樣地，你也可以在平板電腦等觸控螢幕裝置上使用外接鍵盤或滑鼠。

請勿嘗試從螢幕大小推斷輸入機制，而是使用 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;
  }
}

即使使用者有可精細控制的主要輸入機制，還是請三思再縮小互動元素的大小。Fitts 定律仍適用。即使使用精細的指標，也需要更專注的注意力才能瞄準較小的目標。無論使用何種指標裝置，較大的指定區域都會對所有人有利。

任何指標

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;
  }
}

只要將滑鼠游標懸停在該按鈕上，圖示就會顯示。但如果您使用鍵盤切換至按鈕，圖示仍會保持隱藏狀態。使用鍵盤時，您會將焦點放在該項目，而不是將游標懸停在該項目上。已連接滑鼠的電腦裝置會回報主要輸入機制可懸停，這項資訊為真。不過，如果使用者在連接滑鼠的情況下使用鍵盤，就無法享有 :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 屬性可讓您精細控管虛擬鍵盤。舉例來說，如果有一個 input type 的值為 number，您可以使用 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

這項屬性已在 Media Queries 4 中淘汰。

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

任何指標都包含手指等指標。

指標已包含觸控輸入類型。

指標不包括滑鼠等。

指標確實包含滑鼠做為輸入裝置。

當其他非主要輸入工具 (例如觸控筆) 通過測試時，任何指標都會回報為 true。

any-pointer 會查詢所有裝置輸入類型，以便比對。

哪些輸入類型會向使用者顯示更合適的虛擬鍵盤？

type="url"

鍵盤會提供按鈕，支援輸入網址。

type="tel"

鍵盤會提供按鈕，支援輸入電話號碼。

type="number"

鍵盤會提供按鈕，僅支援輸入數字。

type="email"

鍵盤會提供按鈕，支援輸入電子郵件地址。