「モバイルユーザビリティ」／文字が小さすぎて読めません

サイト制作もあと少しで完成まじかというときにgoogleさんからサイトに問題がありました！っと通知が来ました。

ビックリして確認すると「文字小さい」「はみ出してる」とのこと。心当たりがあるようないような（汗）
「モバイルユーザビリティの問題を解決する」のボタンを押すとGoogle Search Consoleのモバイルユーザビリティページにリンクしています。

下の画像のようなページでいつからエラーが発生し始めたのか詳細がわかるようになっています。

どこの何行目を治せって書いてたらもっと修正しやすいと思いますが、詳しく書かれていないのでモバイルユーザビリティっとはなんでしょう？から調べていきます。

今回エラーが出ているのは文字サイズと画面サイズからはみ出てるなのでモバイルユーザビリティの基準は何か？っというのと対策方法をまとめてみました。

Google モバイルユーザビリティ基準のフォントサイズについて

Web上のテキストのサイズを知ることは困難です。
誰かが小さな画面を使用している場合、その画面が目の近く、つまり手の長さだけ離れていることは間違いないでしょう。
しかし、画面がどんどん大きくなるにつれて、その接続を確立するのは難しくなります。ラップトップサイズの画面はおそらく視聴者にかなり近いでしょうが、ワイドスクリーンのデスクトップモニターはテレビ画面とほぼ同じサイズです。人々はデスクトップ画面から腕の長さだけ離れて座っていますが、テレビからはるかに離れて座っています。
それでも、誰かが画面からどれだけ離れているかを確実に知ることはできませんが、適切であることが判明するテキストサイズを使用してみることができます。小さい画面には小さいテキストサイズを使用し、大きい画面には大きいテキストサイズを使用します。

画面サイズが大きくなるにつれて、メディアクエリを使用してfont-sizeプロパティを変更できます。
引用・参考：レスポンシブデザインを学びましょう！タイポグラフィhttps://web.dev/learn/design/typography/#text-size

@media screen and (max-width: 414px) {
	html {
 font-size: 125%;
 }
}
/*iphone6*/
@media screen and (max-width: 375px) {
	html {
 font-size: 150%;
 }
}

/*iphone5*/
@media screen and (max-width: 320px) {
	html {
 font-size: 170%;
 }
}

小さいフォント指定してる所を手作業で修正していくのは時間がかかりますよね。
なので上記のようにメディアクリエで指定しなおしていきます

CSSに追記が終わったら、エラーが修正できているかどうか確認します。
Google Search Consoleページに戻って「修正を検証」ボタンをクリックします。