「ultimate-ez.comを支える技術」というカテゴリを作って、wordpressのテーマを作るまでに勉強したことや調べたことをまとめようと思っているんですが、
「備忘録」としての小ネタのまとめも、このカテゴリにアップしていこうと思います。
目次
今回のテーマは「-webkit-text-size-adjust」!
webkit系の独自仕様として、text-size-adjust
というプロパティがあります。
超ざっくり言えば、「iPhoneを横向きにした時、縦向きの時に対して文字サイズをどうするか」というプロパティ。
初期値の「自動設定」だと、縦向きの時より文字サイズが大きくなるように調整されます。
今作っている新テーマでの見え方をチェックしてみると、こんな感じ。
“読みやすさ“を追求してのことなのかもしれませんが、このままだとちょっと微妙…。
-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
を指定する目的は、、
- iPhoneで横向きの時に文字が自動で調整されないようにする。
- PC版Safariでのユーザビリティーも守りたい。
⇛-webkit-text-size-adjust
を指定したほうが良い!
⇛プロパティはnone
ではなく、100%
を指定する!
というわけで、Safariのためだけにはなるものの、-webkit-text-size-adjust: 100%;
を指定するのが良さそうです。今のところは。
コメントを残す