モバイルユーザビリティの問題を修正した。
なんか、Search consoleから、 “「モバイル ユーザビリティ」の問題が新たに検出されました” というメールがきた。
bootstrapのgridシステムを使って、 モバイルでもそれなりの表示するように設定してるのに、 おかしいな、と思って詳細をみたら、
“コンテンツの幅が画面の幅を超えています”とのことだった。
いくつか調べてみたら、 デスクトップのブラウザで幅を狭くして表示した場合は、 メディアクエリがきちんと動いて、 画面幅がきちんと動作してモバイル用の画面が表示されたが、 モバイル実機だと、モバイル向けページじゃなくて、デスクトップ版がスクロールして表示される形になっていた。
これは携帯側でデスクトップ用のページを表示しようとした時の挙動だ。
確認したら、viewportが設定されていなかったので、 追加して完了
<meta name="viewport" content="width=device-width" />
bootstrapのCSSをlinkしても、viewport設定は自動でされる訳ではないので、 手動でHTML側に追加する必要がある。
意見、ご感想、コメントはフォームにどうぞ。