解決長表格 Mobile Usability (行動裝置易用性) 問題

日期：
搜尋引擎優化 (SEO) 工具 Google Search Console 在 Mobile Usability (手機行動裝置上的易用性) 區塊出現錯誤訊息「Clickable elements too close together」(可點選的元素之間距離太近)、「Content wider than screen」(內容寬度超出螢幕顯示範圍)。解決方式是修改網頁語法。



問題狀況

使用 MediaWiki 架設網站，原本已經安裝 Extension:MobileFrontend 擴充套件改善行動裝置上閱讀上的體驗。在 Google Search Console  Mobile Usability 問題狀況都是出現在長表格的頁面。

解決方式

1. 如果表格有設定寬度 (例如: 500px) 請改成比例值 (例如: 100%)

2. 表格用 <div> 區塊包起來，再加上 overflow-x 屬性標籤
<div style="width:100%; min-height: .01%; overflow-x: auto;">
<table> 略 ... </table>
</div>  
如果使用 MediaWiki 特殊的表格語法，則是

<div style="width:100%; min-height: .01%; overflow-x: auto;">
{|
|Ice cream
|Location
|-
|Chocolate
|Taipei
|-
|Vanilla
|Tainan
|}
</div>  
完成網頁修改後，再到 行動裝置相容性測試 - Google Search Console 確認已經修復問題


參考資料

留言

張貼留言