iOSのSafari、横向きで表示が崩れる

文字が大きくなる
スポンサーリンク

横に向けると文字が大きくなる

グリッド揃えに関する記事を書いていた時 ふと手持ちの iPhone 表示を傾けると急に文字が大きくなった タイトル画像参照

ルビの振ってある 行取ぎょうど css 通りの大きさなのだが 他の文字が大きくなってしまう

これではグリッド揃えどころではない という事で調べてみた

Responsinator の不具合?

Responsinator で確認

普段から 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%; 
 } 

コメント