CSSのルートサイズからの相対指定単位「rem」がなぜかiPhoneでだけ効かない事態にハマってしまっていたので解決策をメモしておきます。
最初に結論からいうと共通で読み込むCSSに以下の記述を入れていたのが原因でした。
body,html {
-webkit-text-size-adjust: 100%;
}
これで「あ！」と気がつかれた方は多いのではないでしょうか。
これはかつてiPhoneでサイトを閲覧している時、縦向きから横向き、横向きから縦向きなどに方向を変えるとフォントサイズがcssで指定したものと変わってしまうバグ？があったんですね。
それを防ぐための措置としてcssにこのプロパティを書いていたんです。
これが昨今のレスポンシブWebを作成する際に推奨される単位remでの指定に悪さをしてしまい、一見すると「iOSデバイスでなぜかremがダメなんだけど・・・」となってしまうわけです。
この記述は一度書くと見直す必要が無かったこともあり、普段はいじらないような共通cssにひっそりと記述されていたので発見が遅れてしまいました。
同症状にお悩みの方は読み込んでいるCSSにこの記述が無いか調べてみてください。