當您的設計顯示在行動裝置上時 務必確保按鈕或連結等互動元素夠大。 而且周圍有足夠的空間 讓使用者輕鬆按下按鈕,而不會意外與其他元素重疊。 讓所有使用者都能受惠 但對於行動不便的使用者而言特別有幫助。
建議觸控目標大小至少為 48 個裝置獨立像素 且行動版可視區域正確設定而成 舉例來說,圖示的寬度和高度可能只有 24 像素 您可以使用額外的邊框間距,讓輕觸目標的大小提升至 48 像素。 48x48 像素的區域相當於 9 公釐 這反映了使用者的指尖大小。
在示範中,我已為所有連結加上邊框間距,以確保符合最小尺寸。
觸控目標之間也應保持約 8 像素的距離。 水平和垂直方向 導致使用者的手指輕觸目標不會意外觸碰到另一個輕觸目標。
測試觸控目標
如果您的目標是文字,並且您使用 em
或 rem
等相對值來調整文字大小和任何邊框間距,
可以使用開發人員工具確認該區域的計算值夠大
在以下範例中,我使用 em
做為文字和邊框間距。
檢查連結的 a
。
在 Chrome 開發人員工具中,切換至「Computed」窗格,即可查看方塊的各個部分
看看它們解析為哪個像素大小
Firefox 開發人員工具中有「版面配置」面板。
您可以在這個面板中取得已檢查元素的實際大小。
使用媒體查詢偵測觸控螢幕使用情形
與其單純測試可視區域尺寸,然後猜測 圖片如果較小,可能是手機或平板電腦 使用觸控螢幕時,現在有更穩健的方式 進行設計。
這是一項媒體功能,現在可以透過媒體查詢進行測試
使用者的主要輸入來源是否為觸控螢幕 (pointer
),且
目前偵測到的任一輸入裝置是否為觸控螢幕 (any-pointer
)。
pointer
和 any-pointer
功能會傳回 fine
或 coarse
。
比方說,有人使用滑鼠或觸控板
就算該滑鼠已透過藍牙與手機連線
coarse
指標代表觸控螢幕
該裝置可以是行動裝置,但也可能是筆記型電腦或大型平板電腦
如要調整媒體查詢中的 CSS 來增加觸控目標, 測試概略指標可讓您擴大所有觸控螢幕使用者的輕觸目標。 如此一來,無論裝置是手機還是更大尺寸的裝置,輕觸區域都能放大該區域。
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
歡迎進一步瞭解指標等互動媒體功能 參閱「回應式網頁設計基本概念」一文。