未経験からのフルスタックエンジニア

スキルをつけよう!未経験からフリーランスエンジニアへの成長記録

スマホ画面だとフォントサイズが一部変になる現象の解決

起こった問題

デベロッパーツールのスマホ画面では問題ないが、
実機で確認すると、同じcssを適用しているのにも関わらず、
一部だけ効かない(フォントサイズがおかしくなる)現象が発生

解決策

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

bodyに上記の記述を追加する。
スマホに対してのテキストサイズの挙動を制御するものみたいです。
デフォルトがautoで、自動調整がかかってしまっていたのが原因のようです。

スマホ対応まで考えるとなかなか難しい。 googleの検証ツールだと問題ないこともあるから、やっぱり実機テストが重要だなと感じました。

参考

myscreate.com