PC用のページを作ったら、スマホでは文字サイズが自動調整される件

thml　で久々に特設ウェブページを制作した。

まあ、今までの感覚で作っていたら出来上がって落とし穴が・・・

「スマホで見ると文字がはみ出ています・・・機種によるけど」

・・・・ありゃ？

おかしい。文字の領域設定もきちんとcss制御したのに・・・？

[css]

<div>

[/css]

ってやつです。文字の部分はposition を absoluteにしたので問題ないはずと思っていたら確かにスマホで見ると大きくはみ出している。ブラウザによって文字フォントが対応していないのかと思っていたら、そうでもないみたいでした。試行錯誤した挙句たどり着いた結論。

スマホは自動で文字の大きさを調整する機能がある、という事実が発覚。←スマホ持っていれば常識か？社長、スマホを仕事用に買ってくれ！

ようやくにこの自動調整機能を無効にするcss制御コードを見つけて適用。

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

これでひとまずPCとスマホと、文字の見え方に違いがなくなる。

ちなみにIEとFirefoxなどブラウザによって見え方が異なる問題はまた別にcssを分けなければいけない。

それはまた別問題。