なにが起きた？
PCのブラウザで確認すると正常なのに、iOSのどのブラウザで見てもキャッシュを削除してもスタイルが崩れている！(フォントサイズがおかしい)
CSSでfont-sizeを16pxに指定しても明らかにデカい！
画面中央5行はデフォルトの16pxなのだが明らかにデカくて画面からはみ出てしまっている。
解決
結論: 親divの幅をデカくしていたのが原因だった。
親divのwidthを小さくしたら(iOSのCSSピクセルサイズに収まるサイズにしたら)解決した。
参考
iOSには端末を縦向き、横向きにした時に自動的にフォントサイズを変化させる(小さい文字を拡大する)機能があるらしく、bodyやhtmlに-webkit-text-size-adjust: 100%;を指定してあげるとその機能を無視したサイズになるため思い通りのスタイルになるようだ。
ただし今回のケースでは、他のページや すぐ下のフォント(16px)は拡大されていないので根本的な解決にはならないと判断…。
ブラウザやプログラムと睨めっこしていた時、なんとなく画面を横スライドしたら画面が右にズレた。
(画面をピンチアウトしても縮小できなかったので、横幅サイズという視点は無くなっていた。)
ここでようやく気が付く…。
「遊び心に<!DOGTYPE html>ってタイトルに変えた時divサイズ変えたんだ…」
そうか、iOSの画面幅に応じてフォントサイズが変わる機能が働いてフォントがデカくなっていたんだ。
iPhoneのCSSピクセルサイズを調べて、大体これくらいなら大丈夫というサイズまで親divのwidthを小さくした(width: 370px;)
ちなみに元はwidth: 700px;だった。
うん、綺麗！
ちなみに画面を横にしても問題なかったので-webkit-text-size-adjust: 100%;は指定していません。
本当はとりあえず指定していた方がいいのかな？ちょっとそこら辺はわかりません。
プログラミングは灯台下暗しな問題が多々あり、毎度「もっと遠くから、いろんな視点から問題を見なくては」と思っています。思っているだけでできてはいません…。