PCサイトをモバイル端末（スマホ・タブレット）で表示すると一部の文字が大きくなってしまう場合の対処法

スマホやタブレットなど、モバイル端末のブラウザでPCブラウザ用にデザインされたサイトを開くと、部分的にフォントサイズが大きく表示されてしまう、という現象。
自分の中では解決済みな問題なのだが、某ヘルプフォーラムを見ていたら2016年11月の段階でスレが立っていたので、今でも疑問に思っている人がいたら参考にされたし。

※その某ヘルプフォーラムで回答したのは私自身なのだが、フォーラムはどんどんスレが流れてしまうので、ここに同じ事をここに書きとめておく。

モバイルのブラウザが勝手なレンダリングをするのをCSSでブロックする

結論を先に書くと、CSSにこれを加えると解決する。

body {
-webkit-text-size-adjust: 100%;
}

モバイルブラウザでの表示がおかしい場合、記述する内容は他にも色々あるが、文字サイズだけがおかしいのであれば、これで解決する。

-webkit-text-size-adjust: none;
でも同じ（だと思う）。

全てのモバイルブラウザで解決する訳ではない

お決まりの注意事項

・全てのモバイルブラウザで解決する訳ではない
・永続的にこの記述でいいとは限らない

そもそも「-webkit-text-size-adjust」という記述を全てのブラウザがサポートしている訳ではないだろうし、
ベンダープレフィックス付きの記述は、定期的に対応ブラウザをチェックする必要があるので。

CSSのフォントサイズ指定が効かないのは何故？

そもそも何故この現象がおきるのか？なのだが、「ブラウザが気を利かせているから」である。
PCサイトをスマホのブラウザで表示させたら文字が小さすぎて見えないでしょ？CSSのfont-sizeを無視して大きく表示しておきますね、という事。

では、文字サイズが大きくなったりならなかったり対応がマチマチなのは何故か？だが、ブラウザにはページのレイアウト構造が理解できないから、である。
私が制作していたサイトだと、見出しタグのフォントサイズが大きく表示されてしまっていた。
「見出しタグ（h2）を使っているから大事な文字でしょ？大きく表示しておくね」と気を使われたのである。

それ余計なお世話だ。cssの記述通りのfont-sizeを反映させろ！と思ったら、

body {
-webkit-text-size-adjust: 100%;
}

なのである。

根本的な解決はスマホ対応をすること

上記記述でフォントサイズの問題が解決したとしても、スマホからの検索・閲覧を無視してPC向けのサイトデザインしかしないというのは最早通用せず、
小手先の対応よりも根本的なモバイル対応が必須になってくると思われる。