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

今回のテーマは「-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を指定する目的は、、

1. iPhoneで横向きの時に文字が自動で調整されないようにする。

⇛-webkit-text-size-adjustを指定したほうが良い！

2. PC版Safariでのユーザビリティーも守りたい。

⇛プロパティはnoneではなく、100%を指定する！

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