こんにちは、小島です。

先日スマホサイトであるバグに遭遇しました。 ※ちなみに対策はありますが解決していませんので参考までに。。

iPhone5s (iOS7)でページを見ていた際に

縦表示 → 横表示 → 縦表示

にすると、一部の文字が横表示の時の大きさのまま固定されてしまう。。

横表示にした時にフォントサイズが大きくなって欲しかったので 「-webkit-text-size-adjust: 100%;」は使いたくない。

具体的な対策はわかりませんでしたが とりあえず微妙にフォントサイズを変更すると直るようでした。 ※昔MacのPhotoshopでMSゴシック使う時もこんなだったな〜

jQueryなども影響しているのか、同じフォントサイズでも 場所によっては変わったり変わらなかったり。

そこで実験してみる事にしました。

基本サイズ(ピクセル）を12ピクセルから16ピクセルまで それぞれ12pxから26pxまで(パーセント）で実験。

実験ページ

とりあえず横にしてみると

泥沼にハマりました。

横にした時のフォントサイズがめちゃくちゃ。。 これといった規則性もみつからない。。

その後、いろいろ調べてみた結果 やはり「-webkit-text-size-adjust: 100%;」が妥当なのでしょうか。