読者です 読者をやめる 読者になる 読者になる

世界が変わったのだから、自分も変わらなくてはならない。

エンジニア兼デザイナーのナカモリのブログです。

【CSS】スマホのブラウザによってフォントサイズが異なって表示されてしまう場合の対処例

CSS Webデザイン

f:id:takahironakamori:20160216000031p:plain

※色は気にしないでください。Androidのスクリーンショットの撮り方がわからないだけです。

スマホ用のサイトに作らずに(または最適化させずに)、パソコン用に作ったウェブサイトをスマホでそのまま表示したい場合があります。少し前のAppleのサイトみたいな感じです。

その時にAndroidのChromeで見たときとiPhoneのSafariで見たときで、同じテキストなのにフォントサイズが同じ場合と異なって表示される場合があります。上の画像は異なって表示される場合の例です。

いろいろ調べて試した結果、フォントサイズが異なる箇所に下記のCSSを加えると解消しました。

AndroidのChrome用のむりやり調整するためのCSS

なぜフォントサイズが変わるのか、このCSSを適用することでなおる理由はよくわかりませんでした。

でもまぁ、IE6とか7が主なブラウザだった数年前は、IE(InternetExplorer)と他のブラウザとの表示の差異を調整する呪文のようなCSS(zoomを使ったりとか…)があって、なんだか懐かしいなぁーと思いました。