どうも、Facebookにもうブログを20日以上更新してないぞ！
っと怒られてしまったMaMoTaKuです、、、

今回は、タイトル通り「iPhoneのSafariで文字サイズの指定が効かない時」の対策をしたいと思います！

iPhoneのSafariで文字サイズが効かない

現象としましては、CSSで文字のサイズを小さくしたはずなのに大きく表示されてしまったり、
逆に大きく指定したはずなのに小さくなることがあります。
しかもこの現象はiPhoneのSafariだけっぽいです、、、

webkit-text-size-adjust: 100%;

「webkit-text-size-adjust: 100%;」
をCSSのbodyに与えるだけで解決すると思います！

注意として、
「-webkit-text-size-adjust: none; 」
だけはやってはいけないそうです！

引用
>以下のページに詳しい説明がありますが、-webkit-text-size-adjustでnoneを指定しちゃうとデスクトップ版のChromeやSafariなどで文字サイズの拡大ができなくなったりするようなので注意。
こちらのブログで詳しく書かれています！
http://m.designbits.jp/13031617/

MaMoTaKuなりの対策

さすがにコピー記事だと気が引けるので、
MaMoTaKuはこうゆうふうにやろうかなと思います！

やること
1.jsでiOSの端末かどうかを判定
2.可能だったらSafariかどうかを判定
3.iOSの端末でSafariを使っていることが分かったらbodyにjsで直接スタイルをかく
よろしければ、iPhoneなどのiOS端末で
DEMO
をご覧下さい！
背景が赤くなった時がちゃんと「webkit-text-size-adjust: 100%;」が効いている時です！

あれ、これブラウザ判定のjsも作っちゃった感じじゃね笑？
てかそっちの方がメインになってる気がするのは気のせいだよな、、、笑