修正 Console 行動裝置可用性錯誤 - 文字太小、元素距離太近與可視區 device-width 錯誤
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 支援中心 - fixed-width_viewport
留言
張貼留言
由於廣告留言太多，因此改採審核發佈，請耐心等候。
無法留言？請點我