モバイルユーザビリティの問題が再発！？

こんにちは、ムゲンです。

またまたモバイルユーザビリティの問題が、サーチコンソールからメールで通知されました。。。

コンテンツの幅が画面の幅を超えています

新しい問題が報告されました。

内容的には、

「スマフォなどの画面で見たときに、横スクロールが発生してしまう可能性がある」

ということのようです。

うーむ、発生しうるのは、CSSの設定などで何かしらのwidth（横幅）を、固定値で指定したときなどに出るらしいんですが。

ここ最近スタイルシートはいじってないんだよなぁ。

さらに、報告が上がっているページを見てみたら、投稿日が2018/10/26。

さらにさらに、サーチコンソール上で前回のクロール日が2018/10/29だと。

う～～ん、なんでそれが今更通知されるんでしょうか？（笑）

嘆いていても始まらないので色々いじってみる

もうね、完全にトライ＆エラーですね。

何が正しいのかわからないし。

そもそも、いつのエラーなのか、実は前回の対応でレスポンシブ対応して直ってるかもしれないしね。

ＣＳＳのチェック

CSSは、とりあえず貼り付けまくってるので（笑）、改めて中身を見てみました。

特に幅を変に設定していそうなところはありませんでしたが、一部気になるところがありました。

それは、一か所だけ全角のスペース入っているところがありました。

インデント部分だったので、これで動かなくなるとは思えませんが、職業柄、全角スペースはあまり好きじゃないので駆除してみました。

ビューポートは大丈夫か？

ここで一つ気が付いたのが、ビューポートの設定がモバイル側の設定に入っているということ。

でも、レスポンシブモードだと、ＰＣの設定が適用されるから無視されるよ、的なコメントがモバイルのデザイン画面に書かれてましたね。

え、もしかしてこれ？

でも、以前検出されてた「ビューポートが設定されていません」はもう直っている扱いなんですけどね。

よくわからんけど、とりあえずＰＣ版の方にもビューポートの設定を入れてみました。

レスポンシブ いえす！ 

あとは、色々調べていたら、レスポンシブデザインは設定するだけでなく、ＣＳＳに

/*
Responsive: yes
*/

これを入れろ！っていう情報がチラホラ見つかりました。

どうやら古い情報が多いようですが、これもとりあえず入れてみました。

もう一度検証させてみる

対してやれることはありませんでしたが、何かしらいじったので、サーチコンソール上で再度検証をさせてみました。

検証が始まったようで、数日かかるよ、ってメールが来ました。

直るはどうかはわかりませんが、ひとまずこれで様子見ですね。

結果は後日更新します。

ポンポンメール来たぜ！（2019/01/30 追記）

「サイト（https://www.mugen-macca.com/）に関する「モバイル ユーザビリティ」の問題が修正されました」

というようなメールが3通も来ました。

3通？(;´∀｀)

内容的には、以下の問題が改善されたとの通知でした。

• 「ビューポートが設定されていません」
• 「テキストが小さすぎて読めません」
• 「クリック可能な要素同士が近すぎます」

え、今更コレですか？

もう3ヶ月くらい前ですよ。（笑）

ちょっと何がどうなっているのか、軽く混乱していますが、この問題は結構前に対応した問題で、確かにサーチコンソール上では状態が直っていなかったので、その結果が今来たということなのかな。

肝心な「コンテンツの幅が画面の幅を超えています」はまだスルーのようです。

また、３か月後ですね！

というわけで、進展がありましたら、再度更新します。桜の季節にでも！

それでは、今回はこの辺で。