手機等小螢幕裝置通常都有觸控螢幕。大螢幕裝置 (例如筆記型電腦和桌上型電腦) 通常配備滑鼠或觸控板等硬體。他們原本很想將觸控功能和大螢幕的螢幕填滿,
但實際情況卻有些不同。部分筆記型電腦提供觸控螢幕功能。使用者可以與觸控螢幕和/或觸控板互動。同樣地,你也可以透過觸控螢幕裝置 (例如平板電腦) 使用外接鍵盤或滑鼠。
您不必嘗試根據螢幕大小推論輸入機制,而是改用 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
) 是表單欄位額外加入的小型屬性,但也可能是影響使用者體驗的一大要素。藉由預測並回應使用者的裝置功能,有助使用者做好萬全準備。歡迎參考我們的學習表單課程,瞭解更多資訊。
接下來,我們來看看一些常見介面模式。
隨堂測驗
測試你對互動的瞭解程度
與其嘗試從螢幕大小推斷使用者的輸入類型,請問你該使用哪項功能?
prompt()
詢問使用者handheld
@media (pointer)
和 @media (any-pointer)
有何不同?
哪些輸入類型會向使用者顯示更合適的虛擬鍵盤?
type="tel"
type="number"
type="email"
type="url"