横に向けると文字が大きくなる
グリッド揃えに関する記事を書いていた時、 ふと手持ちの iPhone で、 表示を傾けると急に文字が大きくなった。 （タイトル画像参照）
ルビの振ってある 「行取」 が css 通りの大きさなのだが、 他の文字が大きくなってしまう。
これではグリッド揃え処ではない ｗ という事で調べてみた。
Responsinator の不具合？
Responsinator で確認
普段から Responsinator での確認はしていたのですが、 全然気付きませんでした。
改めて確認してみると、
あれ？ちゃんと表示される、、、 Responsinator の不具合だろうか？
「Responsinator」 「不具合」 でググってみる
も、 そんな情報は出てきません。
って事は、 あれだ。 キャッシュ絡みで css が上手く読めてないんだ。 と判断し、 レンタルサーバ （キャッシュ関係では定評のある X SERVER です。） のキャッシュ周りを全てオフにしてみた。
キャッシュ関係を全てオフに
X SERVER でキャッシュの設定を変更すると、 反映されるのに時間が掛かるとの事。 反映された事を確認し、 iPhone をリロードすると、
結果は変わらず ；；
修正方法
「iOS」 「Safari」 「横向き」 「崩れる」 でググる
あっさりと出てきました ｗ
他にも同様な情報があり、 そこそこな問題の様子。
css とメタタグの追加が必要ですが、 メタタグは既に付加されている様なので css のみを追加します。
css で修正
check
- カスタマイズは自己責任でお願いします。
- wp-cocoon.comサイトのサポート対象外となります。
コードはこちらになります。
body {
-webkit-text-size-adjust: 100%;
}
コメント