02 | 7月 | 2014

PCサイトを構築時にスマホでページを閲覧すると一部の文字サイズが
大きく拡大されて表示されることがありました。

iPhoneやAndroidなどでは文字が見やすいように文字サイズを自動調整して、
大きく表示してしまうようです。

しかし、文字が拡大してしまうとPCサイト用に構築したデザインが
崩れてしまったりすることがあります。

文字サイズを勝手に拡大されないようにするには
CSSの「-webkit-text-size-adjust」プロパティを指定すると回避できます。

下記にCSSの「-webkit-text-size-adjust」プロパティを使用して、
スマホ・PCサイトの文字サイズを自動調整して拡大表示させずに
固定して表示する方法をメモします。

■ 「-webkit-text-size-adjust」

テキストの文字サイズを調整するプロパティです。
デフォルトは「auto」なので文字サイズが自動調整されます。
下記で値で設定することができます。

auto　→　自動調整
none　→　自動調整しない
パーセント「%」：フォントサイズに対してパーセントで指定

■ 「-webkit-text-size-adjust」で文字サイズを固定

文字サイズを自動調整させずに固定させたい場合は下記のように記述します。
bodyタグに記述すればサイト全体に反映させることができます。

body {
    -webkit-text-size-adjust: 100%;
}

また、一部に要素にのみ反映させたい場合は、その要素に対して「-webkit-text-size-adjust: 100%;」を指定すればOKです。

div#textArea {
    -webkit-text-size-adjust: 100%;
}

自動調整させない時に「none」を使用しない理由は下記のページを参考にさせていただきました。

自動調整されて文字が読みやすくなることもあるので、
その時の状況によって調整するのがいいと思います。

raining