iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ
かなりレアなケースだと思うのですがiPhoneのSafariで特定のzoomとfont-sizeの際に文字サイズが拡大するバグがあります。
次のようなCSSとHTMLの組み合わせ
html{
zoom:0.5;
}
p.case1{
zoom:2;
font-size:10px;
}
p.case2{
font-size:20px;
}
p.case3{
font-size:21px;
}
p.case4{
font-size:22px;
}
<h1>case1</h1>
<p class="case1">1あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ<p>
<h1>case2</h1>
<p class="case2">2あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ<p>
<h1>case3</h1>
<p class="case3">3あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ<p>
<h1>case3</h1>
<p class="case4">4あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ<p>
ちゃんと表示できてる感じですが、一度横向きにしてから元に戻すとcase2とcase3は文字のサイズが倍に拡大します。(iOS4.0と4.2で確認)
いちおうcase1の手法で解決できます。
関連エントリー
iPhone/iPadでPCと同じJavaScriptのイベントを実装する
PC用とiPhone用のサイトを切り替える.htaccess
jQueryでiPhone/iPadの向きを検出する
iPhone/iPadでダブルタップをJavaScriptで実装する
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」
スポンサードリンク
«HTML5が使えるスマートフォンOS | メイン | CSS Nite LP, Disk 15「ソーシャルメディア特集」»