輕觸目標未設定為適當大小

輕觸目標是指使用者在觸控裝置可以互動的網頁區域。按鈕、連結和表單元素都有輕觸目標。

許多搜尋引擎會根據網頁適合行動裝置瀏覽的方式,決定網頁排名。請確保輕觸目標夠大,彼此相距得足夠,讓網頁更適合行動裝置且易於瀏覽。

Lighthouse 輕觸目標稽核失敗

Lighthouse 標記的輕觸目標頁面需同時符合以下兩項條件:

  • 目標小於 48 x 48 像素。
  • 至少 25% 的目標區域會在目標中心的 48 像素範圍內與其他目標重疊。
Lighthouse 稽核顯示輕觸目標大小不當

如果稽核失敗,Lighthouse 會在資料表中列出結果,並包含三個資料欄:

輕觸目標 觸控目標大小不正確。
大小 目標的定界矩形大小 (以像素為單位)。
重疊目標 其他的點按目標 (如果有的話) 距離太近。

如何修正輕觸目標

選項 1:增加太小的輕觸目標大小。即使輕觸目標為 48 x 48 像素,則無法執行稽核作業。如有元素不應「看起來」變大 (例如圖示),請嘗試增加 padding 屬性:

使用適當大小的輕觸目標
使用 padding 可放大輕觸目標,而不變更元素外觀。

選項 2:使用 margin 等屬性,增加距離太近輕觸目標之間的間距。點按目標之間的 8 px 是不錯的起點,但間距不一定能通過稽核,尤其是對於範圍太小的目標。

資源