當您的設計顯示在行動裝置上時 務必確保按鈕或連結等互動元素夠大。 而且周圍有足夠的空間 讓使用者輕鬆按下按鈕，而不會意外與其他元素重疊。 讓所有使用者都能受惠 但對於行動不便的使用者而言特別有幫助。
建議觸控目標大小至少為 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;
}
}
歡迎進一步瞭解指標等互動媒體功能 參閱「回應式網頁設計基本概念」一文。