在行動裝置上顯示設計時,請確保按鈕或連結等互動元素大小適中,且周圍保有足夠空間,讓您輕鬆按下按鈕,而不會意外與其他元素重疊。這項功能讓所有使用者都能受惠,但對行動不便的使用者特別有幫助。
在已正確設定行動裝置可視區域的網站中,建議至少要包含 48 個裝置獨立像素。舉例來說,雖然圖示的寬度和高度只有 24 像素,但您可以使用額外的邊框間距,將輕觸目標的大小控制在 48 像素以下。48x48 像素區域對應約 9 公釐,也就是使用者的手指觸控板大小。
在示範中,我為所有連結加上了邊框間距,確保連結符合最小尺寸。
觸控目標也應保持大約 8 像素的間隔 (水平和垂直方向),以免使用者的手指按下某個輕觸目標時,無意間碰到另一個輕觸目標。
測試觸控目標
如果目標為文字,且已使用相對值 (例如 em
或 rem
) 調整文字和任何邊框間距的大小,可以使用開發人員工具確認該區域計算出的值夠大。在以下範例中,我使用 em
做為文字與邊框間距。
檢查連結的 a
,然後在 Chrome 開發人員工具中切換至「Computed」窗格,即可在其中檢查方塊的各個部分,並查看連結解析的像素大小。
Firefox 開發人員工具中有版面配置面板。
在這個面板中,您可以查看已檢查元素的實際大小。
![Firefox 開發人員工具的版面配置面板顯示元素的大小](https://web.dev/static/articles/accessible-tap-targets/image/the-layout-panel-firefox.jpeg?authuser=6&hl=zh-tw)
使用媒體查詢偵測觸控螢幕的使用情形
與其只測試可視區域維度,再猜測小型尺寸可能是手機或平板電腦,因此使用觸控螢幕,現在有更強大的方法,可以根據實際的裝置功能調整設計。
我們現在可以使用媒體查詢進行測試的其中一項媒體功能,包括使用者的主要輸入是否為觸控螢幕 (pointer
),以及目前偵測到的「任何」輸入項目是否為觸控螢幕 (any-pointer
)。pointer
和 any-pointer
功能會傳回 fine
或 coarse
。有些精確的指標,就是使用滑鼠或觸控板的使用者,即使滑鼠透過藍牙連線到手機也一樣。coarse
指標代表觸控螢幕,其中可能包括行動裝置,也可能是筆電或大型平板電腦。
如果您在媒體查詢中調整 CSS 以增加觸控目標,可以測試粗略指標,藉此增加所有觸控螢幕使用者的輕觸目標。如此一來,無論裝置是手機還是尺寸較大的裝置,都能取得較大的輕觸區域。
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
如要進一步瞭解互動媒體功能,例如相關指標,請參閱「回應式網頁設計基本概念」一文。