iPhoneで見ると一部の文字の表示サイズが変わる問題
2014-05-24
今までまったく気付かなかったのですが、iPhone って、勝手にフォントサイズを変えたりするのですな。
詳しくは、下記のサイトを参照。
https://planbworks.net/web/text-size-adjust.html
自分がはまったのは、以下のような float で左右に分割しているパターンで、なぜか左右でフォントサイズが違うという現象。
<div style="float: left">短めの文章</div> <div style="float: right">長い文章ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>
挙動がいまいちよく分からないのですが、短い方は通常の文字サイズで長い方は拡大された文字サイズで表示されていました。
おそらく、iPhone としては可読性を上げるためにこんなことをしているのだと思いますが、勝手にこんなことやられてホントにはまりまくりです(-_-#
そして、この対策は、、、
-webkit-text-size-adjust: 100%;
これ。
要するに、-webkit-text-size-adjust のデフォルトが auto なのがいけないらしい。
ホント、変な仕様を作り込んでくれますな～