修正 Console 行動裝置可用性錯誤 - 文字太小、元素距離太近與可視區 device-width 錯誤

console 行動裝置顯示錯誤的修正方式

Fixed Console mobile device usability error - text too small, elements too close together and viewable area device-width error.

延續上一篇嚇死人不償命的 Console 警告信 ,另外一種大家最常收到的警告信大概就是行動裝置可用性錯誤了。而 Console 是用程式進行自動判讀的服務,雖然它的錯誤通報不一定正確,但還是有參考的價值。以下糊塗流浪貓將介紹各位如何解決上面的這三個問題。


而本文是以 Simple 主題為範例,因此「不一定」適用於你的網站,請各位多加留意。


 

進行任何修改前,請記得備份 HTML 主題。

 

 

未將可視區域設為「device-width」

這個錯誤源自於 Blogger 行動裝置版面預設會套用使用者於桌面版主題 > 調整寬度中所設定「整個網誌」寬度數值,因此很容易造成行動裝置頁面跑掉。

只要到編輯 HTML 中搜尋 meta expr:content='data:blog.isMobile,並將該 meta 標籤中所有的 width= 改為 device-width 即可。或直接於 head 範圍內加入以下程式碼也能解決該項錯誤。

 

修正未將可視區域設為「device-width」的錯誤


<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='width=device-width, initial-scale=1, user-scalable=no' name='viewport'/>

 

 

 

文字太小與可點選的元素之間距離太近

這兩個問題其實是一體兩面,行動裝置版面字體大小與間距可以用新增 CSS 的方式修正;可點選的元素距離過近通常是因為行動裝置的文章段落太近,導致使用者不易點擊。習維尼

由於主題中所設定的字體大小僅能套用在桌面版 (Desktop),目前於設定中無法直接修改行動裝置 (mobile) 上的字體,對此我們可以到 HTML 中新增 CSS 元素來指定行動裝置版面的字體大小與行距間隔。

 


.mobile .post-body {
font-size: 160%;
line-height: 1.6;
letter-spacing: 1px;
}

 

 

 

 

延伸閱讀

Google 開發者中心

Google 支援中心 - fixed-width_viewport

更多 SEO 技巧 

 

 

 

留言