[備忘録]「-webkit-text-size-adjust」は指定しておこう、今のところは!

Webkit text adjust

「ultimate-ez.comを支える技術」というカテゴリを作って、wordpressのテーマを作るまでに勉強したことや調べたことをまとめようと思っているんですが、
「備忘録」としての小ネタのまとめも、このカテゴリにアップしていこうと思います。

今回のテーマは「-webkit-text-size-adjust」!

webkit系の独自仕様として、text-size-adjustというプロパティがあります。
超ざっくり言えば、「iPhoneを横向きにした時、縦向きの時に対して文字サイズをどうするか」というプロパティ。
初期値の「自動設定」だと、縦向きの時より文字サイズが大きくなるように調整されます。

今作っている新テーマでの見え方をチェックしてみると、こんな感じ。

縦向き時:
IOSシミュレータのスクリーンショット 2014 03 29 21 42 50

横向き時:
IOSシミュレータのスクリーンショット 2014 03 29 21 50 28

“読みやすさ“を追求してのことなのかもしれませんが、このままだとちょっと微妙…。
-webkit-text-size-adjustを指定して、うまいこと調整することにしましょう。

ちなみに-webkit-text-size-adjustの仕様はこんな感じ

プロパティの取りうる値

auto
自動調整(初期値)
none
自動調整なし
%指定
親要素のフォントサイズに対する割合

でも、「none」は指定しては行けない!

どうやらnoneを指定しちゃうと、PCでのユーザビリティが落ちてしまう不具合があるようで。。

詳しくは↓こちらのサイトが超参考になります。

ちなみに、この不具合があったからなのか、Chromeはこのプロパティーのサポート自体をやめてしまったとのこと。

というわけで、「自動調整なし」を実現するためには、
-webkit-text-size-adjust: 100%;と指定すればOKです。

ちなみに、今作っている新テーマではbody要素に指定することにしました。
「reset.css」を自分でこさえている人などは、そこで指定してしまうのもありかもしれませんね。

というわけで結論!

Chromeがサポートをやめた以上、-webkit-text-size-adjustを指定する目的は、、

  1. iPhoneで横向きの時に文字が自動で調整されないようにする。
  2. -webkit-text-size-adjustを指定したほうが良い!

  3. PC版Safariでのユーザビリティーも守りたい。
  4. ⇛プロパティはnoneではなく、100%を指定する!

というわけで、Safariのためだけにはなるものの、-webkit-text-size-adjust: 100%;を指定するのが良さそうです。今のところは。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です