當設計顯示在行動裝置上時，請確保按鈕或連結等互動元素的大小足夠大，且周圍保留足夠空間，方便使用者輕觸，同時避免意外重疊到其他元素。這造福了所有使用者，但對行動不便的使用者而言特別有幫助。
在設有正確設定的行動裝置可視區域的網站上，建議的觸控目標大小下限約為 48 個裝置獨立像素。舉例來說，雖然圖示的寬度和高度可能只有 24 像素，但您可以使用額外的邊框間距，將輕觸目標大小提高至 48 像素。48x48 像素的區域約為 9 公釐，相當於使用者的指腹區域大小。
在示範中，我已為所有連結新增邊框間距，確保連結符合最小大小。
觸控目標的水平和垂直間距也應相距約 8 個像素，以免使用者按下一個觸控目標時，不小心觸碰到另一個觸控目標。
測試觸控目標
如果目標是文字，且您使用了 em 或 rem 等相對值來設定文字和邊框間距的大小，可以使用 DevTools 檢查該區域的計算值是否足夠大。在以下範例中，我使用 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;
}
}
如要進一步瞭解互動媒體功能 (例如指標)，請參閱「回應式網頁設計基礎知識」一文。