在行動裝置上顯示設計時，請確保按鈕或連結等互動元素大小適中，且周圍保有足夠空間，讓您輕鬆按下按鈕，而不會意外與其他元素重疊。這項功能讓所有使用者都能受惠，但對行動不便的使用者特別有幫助。
在已正確設定行動裝置可視區域的網站中，建議至少要包含 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;
}
}
如要進一步瞭解互動媒體功能，例如相關指標，請參閱「回應式網頁設計基本概念」一文。