なんか、Search consoleから、 “「モバイル ユーザビリティ」の問題が新たに検出されました” というメールがきた。

bootstrapのgridシステムを使って、 モバイルでもそれなりの表示するように設定してるのに、 おかしいな、と思って詳細をみたら、

“コンテンツの幅が画面の幅を超えています”とのことだった。

いくつか調べてみたら、 デスクトップのブラウザで幅を狭くして表示した場合は、 メディアクエリがきちんと動いて、 画面幅がきちんと動作してモバイル用の画面が表示されたが、 モバイル実機だと、モバイル向けページじゃなくて、デスクトップ版がスクロールして表示される形になっていた。

これは携帯側でデスクトップ用のページを表示しようとした時の挙動だ。

確認したら、viewportが設定されていなかったので、 追加して完了

<meta name="viewport" content="width=device-width" />

bootstrapのCSSをlinkしても、viewport設定は自動でされる訳ではないので、 手動でHTML側に追加する必要がある。