モバイルユーザビリティエラーの対処

Google Search Consoleにおいて特定の頁で、以下のモバイルユーザビリティエラーが発生していた。 ソースを見ても該当する問題点が判明せず、解決することができなかった。

• [エラーの内容]
  • テキストが小さすぎて読めません
  • クリック可能な要素同士が近すぎます
  • コンテンツの幅が画面の幅を超えています

改めてモバイルフレンドリーテスト を行ったところ、スクリーンショットを見てみると頁が縮小表示されていた。 もちろん今までも見ていたのだが、うかつにも気付かずにいた。
そこで次の通り対処してみた。

• 従来
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
• 修正
  • <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

metaタグにminimum-scale=1.0を追加した。 モバイルフレンドリーテストにかけてみたところ「モバイル フレンドリー」となった。
ただしこれは対症的な処置であり、本来はソースを修正すべきである。 原因は箇条書きをネストし過ぎたことであったもよう。

• [参考]
  Google Search Consoleに 「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」と言われた→解決しました！ - sunsun fineな日々

なおモバイルユーザビリティでは画像サイズが障害となることが多いので、スタイルシートに以下の項目を追加設定した。 これにより、画像がビューポートのサイズよりも大きい場合、ビューポートに合わせて縮小されることになる。

img {
   max-width: 100% ;
   height: auto
}