iPhoneのSafariでテキストのサイズが合わない件

  • 投稿日:
  • by

普段、Webアプリを開発するときはPCでChromeやFirefoxを使うのですが、その後iPhoneのMobile Safariで表示させると、Chromeと比べてレイアウトがずれることがありました。

ボックスの高さをemで指定してもそれに収まる行数が変わってしまうのでなぜかと思っていたのですが、やっと分かりました。

行間のデフォルト値が違うんですね。まあ、当たり前というかなんと言うか。 というわけで、CSSでline-heightを指定することで解決しました。

以前紹介した、 InkというCSSフレームワークを使ってたのですが、<p>を使うとline-heightが指定されるので、気付くまでに時間がかかりました。<div>で書いていたところだけサイズが違っていたので。

それだけですが、備忘メモとして残しておきます。