互動

手機等小螢幕裝置通常都有觸控螢幕。大螢幕裝置 (例如筆記型電腦和桌上型電腦) 通常配備滑鼠或觸控板等硬體。他們原本很想將觸控功能和大螢幕的螢幕填滿，

但實際情況卻有些不同。部分筆記型電腦提供觸控螢幕功能。使用者可以與觸控螢幕和/或觸控板互動。同樣地，你也可以透過觸控螢幕裝置 (例如平板電腦) 使用外接鍵盤或滑鼠。

您不必嘗試根據螢幕大小推論輸入機制，而是改用 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;
  }
}

將滑鼠懸停在該按鈕上方，圖示隨即會顯示。但如果您使用鍵盤前往按鈕，圖示會保持隱藏。使用鍵盤時，可以將焦點移至其他位置，而非懸停遊標。配備滑鼠的電腦會回報主要輸入機制支援懸停動作 (是)。但任何人在連接滑鼠時使用鍵盤，並不能享有 :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 屬性可讓您精細控管虛擬鍵盤。舉例來說，由於有一個值為 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) 是表單欄位額外加入的小型屬性，但也可能是影響使用者體驗的一大要素。藉由預測並回應使用者的裝置功能，有助使用者做好萬全準備。歡迎參考我們的學習表單課程，瞭解更多資訊。

接下來，我們來看看一些常見介面模式。

隨堂測驗

測試你對互動的瞭解程度