ホーム > Android | CSS | iPad | iPhone > iPhone/Androidサイトで文字サイズを固定する方法

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

コメント:0

コメントフォーム
入力した情報を記憶する

トラックバック:0

この記事のトラックバック URL
http://www.satoimo18.com/archives/136/trackback
トラックバックの送信元リスト
iPhone/Androidサイトで文字サイズを固定する方法 - Web Designing satoimo18+ より

ホーム > Android | CSS | iPad | iPhone > iPhone/Androidサイトで文字サイズを固定する方法

検索
フィード
メタ情報

ページの上部に戻る