iPhone/Androidサイトで文字サイズを固定する方法

AndroidやiPhone対応サイトを作る際、CSSで画像背景ボタンを作成したり、CSS3でリンクボタンを作成することがあると思いますが、
Androidのブラウザで文字サイズを変更した場合やiPhoneを横に傾けた場合、リンクボタンで指定したheightの範囲を大幅に超えて文字がはみでる等、レイアウトが崩れることがあります。

CSSで-webkit-text-size-adjustのプロパティをnoneにすることで、機種やブラウザの設定に左右されず、指定したfont-sizeに固定することができます。

html,body {
  -webkit-text-size-adjust: none;
}

-webkit-text-size-adjustは、SafariやChromeで採用されているWebkit特有のプロパティで、初期値はautoです。
これにより、例えばiPhoneを横にした場合、画面の幅に合わせて文字の大きさが自動的に変わる、といった動作がおこります。

文字のサイズが変更されても問題ないサイトを制作するのが理想的ですが、レイアウトやデザイン上必要な際はこういった小技を使うこともありだと思います。


参考サイト：CSS HappyLife ZERO