「ultimate-ez.comを支える技術」というカテゴリを作って、wordpressのテーマを作るまでに勉強したことや調べたことをまとめようと思っているんですが、
「備忘録」としての小ネタのまとめも、このカテゴリにアップしていこうと思います。
Contents
今回のテーマは「-webkit-text-size-adjust」！
webkit系の独自仕様として、text-size-adjustというプロパティがあります。
超ざっくり言えば、「iPhoneを横向きにした時、縦向きの時に対して文字サイズをどうするか」というプロパティ。
初期値の「自動設定」だと、縦向きの時より文字サイズが大きくなるように調整されます。
今作っている新テーマでの見え方をチェックしてみると、こんな感じ。
縦向き時：
横向き時：
“読みやすさ“を追求してのことなのかもしれませんが、このままだとちょっと微妙…。
-webkit-text-size-adjustを指定して、うまいこと調整することにしましょう。
ちなみに-webkit-text-size-adjustの仕様はこんな感じ
プロパティの取りうる値
- auto
- 自動調整（初期値）
- none
- 自動調整なし
- ％指定
- 親要素のフォントサイズに対する割合
でも、「none」は指定しては行けない！
どうやらnoneを指定しちゃうと、PCでのユーザビリティが落ちてしまう不具合があるようで。。
詳しくは↓こちらのサイトが超参考になります。
ちなみに、この不具合があったからなのか、Chromeはこのプロパティーのサポート自体をやめてしまったとのこと。
Googoleのプロダクトフォーラムの関連トピック
というわけで、「自動調整なし」を実現するためには、
-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%;を指定するのが良さそうです。今のところは。
