iPhoneハック 「フォントサイズ自動調整による表示崩れ対処」
2011/11/16
スマートフォンサイトも随分と普及して来ましたが、入り口だけスマートフォン専用で中身はPCサイトを見せる方式のサイトも多いですね。また、初めからPCサイトを見たいと言うユーザーも多いため、スマートフォン専用ページでも下の方にPCサイトへのリンクを張るのは今の所常識？のようです。
ここで問題なのがiPhone で使われているSafariのレンダリングエンジンWebkit。
iPhoneではフォントサイズが自動調整されてしまう場合があります。
※これはiPhone版のSafariの仕様で、小さい画面に効果的にWEBページを表示するためにページの幅やその他パーツとの相対的な位置に応じて文字サイズを自動で拡大調整してくれる便利な機能なのですが・・・。
たとえスマートフォン用に最適化されたサイトではないとは言え、表示崩れは寂しい。
そこで、iPhone 用のCSSハックをPCサイトにも入れてみましょう。
--------------------------------------------------------
html {
-webkit-text-size-adjust: none; /* iPhone */
}
--------------------------------------------------------
これを追加してやると自動調整はされることなく、均一に縮小されたページがiPhoneでも表示されますが、PC用Safariでも拡大縮小が出来なくなってしまいアクセシビリティが悪くなってしまいます。
そこで、iPhoneだけに適用するには、
--------------------------------------------------------
@media screen and (max-device-width: 480px) {
body {
-webkit-text-size-adjust: none; /* iPhone */
}
}
--------------------------------------------------------
というハックを使います。
iPhone（4/4s）を横にして表示した時が、480px × 320px（※画面サイズ）
画面が480px以下の時にレンダリングエンジンがwebkitの場合に適用させると言う方法です。
※追記 ---------------
iPhone5が発売されて修正がいろいろ面倒ですが・・・。
iPhone5の解像度が、1136px × 640px。画面サイズが568px × 320px と思われます。
なので、上記のmax-device-width: 480pxは、max-device-width: 568pxで機能するのでしょうか？
手元にiPhone5の実機が無いので確かめていません。
※追記 2013.5.17---------------
上記でiPhone5の解像度について触れましたが、max-device-width: 480pxのままでもiPhone5を横にした状態でフォントサイズの自動調整が行われない事があるテストで判明！
画面の大きさが違うのでどうにも解せない症状なのですが実際、実機での表示がそのようでした。
キャッシュの問題なのかな？理由は現在のところよくわかりません。
追記でした・・・。