互動

手機等小螢幕裝置通常配備觸控螢幕。筆記型電腦和桌上型電腦等大螢幕裝置通常會配備滑鼠或觸控板等硬體。大家都很想讓具有觸控式和大螢幕的大螢幕呈現出成效，

但現實情況不同。部分筆記型電腦提供觸控螢幕功能。使用者可以和觸控螢幕和/或觸控板互動。同樣地，您也可以將外接鍵盤或滑鼠搭配觸控螢幕裝置使用，例如平板電腦。

與其試圖根據螢幕大小推論輸入機制，不如改用 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 媒體功能會回報主要輸入機制是否能懸停在元素上。這通常表示螢幕上會有某種遊標由滑鼠或觸控板控制。

hover 媒體功能與 pointer 媒體功能不同，後者是區分精細指標和粗略指標。如果主要輸入裝置可以將滑鼠遊標懸停在元素上，就會回報 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">

輸入模式

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) 是表單欄位的一小部分，但也可能帶來極大差異。預測並回應使用者的裝置功能，就能讓使用者取得授權。若想進一步瞭解詳情，歡迎參加這堂專屬課程，瞭解如何學習表單。

本課程接著將介紹常見的介面模式。

隨堂測驗

測驗您對互動的瞭解程度