system
小島 和剛

2014.6.30HTML/CSS 

Webデザイナー/ディレクター

小島 和剛

スマホサイト:iPhone文字サイズのバグ

20140630_1

 

 

 

こんにちは、小島です。

 

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

 

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

 

縦表示 → 横表示 → 縦表示

 

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

 

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

 

 

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

 

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

 

 

 

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

 

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

実験ページ

 

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

 

20140630_3

 

 

 

 

20140630_2

 

 

 

 

泥沼にハマりました。

 

 

 

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

 

 

 

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

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ