[ 東京・銀座に行列…iPhone4S今日発売 ]　米アップルが１４日から世界７か国で発売するスマートフォンの新型機種「iPhone4S」を
一刻も早く手にしようと、東京都中央区の「アップルストア銀座」には発売前から数百メートルの行列ができた。（ゴミ売り 10月14日 1時12分）

Android内蔵ブラウザとiPhone4以降のiPhoneに内蔵されているSafariの間でサイト表示の解釈がどう異なっているのか？を示しておく事とする。

Android：縦長は「width480px、height800px」。横長は「width800px、height480px」。横長の方が使いやすい。従って横長を基準とする。
「width800px」に収まるフォントサイズを計算。自分のサイトは「width940pxでフォントサイズ13px」で適切。縮小を思考する。フォントサイズは10pxが適切。
しかしAndroid内蔵ブラウザはdevicePixelRatio「1.5」と言う設定がある。従って、Android内蔵ブラウザはまず「10px * 3/2 = 15px」と計算する。

その後Androidでは文字サイズの設定によって文字の縮小が行われる。　「10px * 3/2 = 15px」、「15 * X = Y」。
文字サイズの設定によって文字の拡大縮小に際して計算に必要な「Xに当てはまる分数」が異なってくる。

「最小」：1/3、「小」：1/2、「中」：2/3、「大」：3/4、「最大」：1/1。

デフォルトの状態で選択されている基準は文字サイズ「中」。従って基準はそこに置く。

・「10px * 3/2 * 2/3 = 10px」　…これが文字サイズ「中」の計算式。
・「10px * 3/2 * 1/1 = 15px」　…これが文字サイズ「最大」の計算式。

基準は文字サイズ「中」なので、10pxが10pxとして描写される。Android内蔵ブラウザは、拡大ではなく「虫眼鏡で物を見た様なやり方」でウェブサイトを拡大する。
虫眼鏡で物を見れば確かに大きくは見えるが実際の物が大きくなっていると言う訳ではない。顕微鏡で見る様な意識となって拡大されていく。
ピンチインで拡大してもフォントサイズが拡大すると言う訳ではなく、10pxのフォントサイズを顕微鏡で見るが如く拡大した様に見せている、と言うやり方である。

iPhone4S：縦長は「width320px、height480px」。横長は「width480px、height320px」。横長の方が使いやすい。従って横長を基準とする。
iPhone4から内蔵されているSafariには、自動で文字を拡大してしまう機能が備わっている。まずはこの機能をオフにする。CSSで指定を掛ける。
「-webkit-text-size-adjust:none;」を指定する。指定しない場合、iPhone4以降のiPhoneは文字サイズを「200%」に拡大して表示する。「none」でその機能を塞ぐ。

文字サイズの勝手な拡大はこれで収まったが、devicePixelRatioは「2.0」。従って「width480px」は２倍され、「width960px」が計算の基準値となる。
「width480pxでフォントサイズ6pxを指定して480 * 2 = 960、6 * 2 = 12、従ってwidth960pxでフォントサイズ12pxとして表示されます…と言う訳ではない」。

「width960pxでフォントサイズ12px」が丁度良い塩梅の場合、指定すべきフォントサイズは「12 / 2 = 6」ではなく「12 / 1 = 12」。すなわち「等倍」で考える。
Androidよりもパソコンに近い考え方。但しiPhone4の日本語フォントと欧文フォントはフォントの横幅が必要なフォント。その分幅を広く取る事も考慮に入れる。

以上がフォントサイズの指定に伴うAndroid内蔵ブラウザとiPhone4以降のSafariの解釈の違い。「スマートフォン」と一括りにする事が如何に危険か、良く分かる。