どうもこんにちは。
Web/App/UIデザイナーのサトウです。
今回は、iOSのSafariで意図せずフォントサイズが大きくなるのを防ぐ「-webkit-text-size-adjust: 100%;」という話をしようと思います。
iOSのSafariでだけページ内の一部のフォントが大きくなる
先日、仕事でWebサイトのコーディングをしていました。
スマートフォン最適化がおこなわれていないWebサイトでレスポンシブ対応するためのコーディングです。
ときどき実機（iPhone）で確認しながらコーディングを進めていると、1箇所、妙にフォントサイズが大きくなっている箇所があります。
正確には1箇所ではなく、同じルールで組んでいる複数の table の決まったセルにその現象が見られました。
16pxで指定しているはずのフォントサイズが、1.5倍ほどに大きくなっています。
ChromeのデベロッパーツールやMac版Safariのレスポンシブデザインモードで確認したときはその現象が起こりません。
念のためFirefoxでも確認しましたが、やはりフォントサイズは正常です。
iPadのSafariでもその現象は起こりませんでした。
当該箇所には特にフォントサイズを変更するようなスタイルは適用していない
フォントサイズが変わってしまう箇所は、なんのことはない table の1セル内にあるテキストです。
そのセルだけ何か特別なスタイルを適用しているということはなく、他の要素で入れ子にしているということもなく、他のセルと同じようにテキストを配置しているだけです。
Chrome のデベロッパーツールで確認しても、フォントサイズを変えるようなスタイルが適用されていることは確認できません。
他のブラウザで調べてみても、もちろん同じ結果です。
iOS版Safariはデバイスに合わせてフォントサイズを自動的に調整する
同様の事例があるか探してみたところ、かなりの数の記事がヒットしました。
それらの記事によると、どうやらiOS版Safariにはデバイスに合わせてフォントサイズを自動的に調整する機能が備わっているそうです。
そういえば昔そんな話をどこかで聞いたような覚えがうっすらとあるようなないような・・・。
さらっと見ただけでも2011年の記事が見つかりました。
この珍現象の被害にあっているデベロッパーさんは相当数に登りそうですね。
とはいえ、僕自身が長年コーディングをしている中でこのような事例を経験したのは初めてで（忘れているだけかも？）、ちょっと驚きました。
しかも、ページ全体ではなく、部分的に調整をかけてくるあたりが厄介ですね。
まぁ、ページ全体でも厄介ですが・・・。
「-webkit-text-size-adjust: 100%;」で解決
このフォントサイズの自動調整機能を制御するCSSのプロパティが text-size-adjust というもので、この値を 100% にしてあげることで、自動調整を止め、100%のフォントサイズに固定します。
Safariに向けての対応ということで、プロパティには -webkit- のベンダープリフィクスも付けておきます。
これを body に対して付与することで、Webサイト全体に適用します。
body {
-webkit-text-size-adjust: 100%;
}
このCSSを適用して iPhone で確認したところ、フォントサイズが意図せず大きくなってしまう現象は解消していました。
他のブラウザで確認しても、異常はありません。
text-size-adjustプロパティは複数フォントのサイズを揃えるためのもの
text-size-adjustプロパティはそもそも複数フォントのサイズを揃えるためのものです。
フォントはそれぞれ形も大きさも異なり、例えば font-size: 16px; と指定してもフォントによって若干大きさが違ったりします。
和文フォントと欧文フォントなどは特にそうですね。
そういった場合、混ざって表示されてもフォントサイズがバラバラにならないよう調整してくれるというわけです。
今回の僕のケースも、よくよく見てみると当該箇所は他の箇所と別の font-family が指定されていました。
が、その指定を除外してみても、症状は改善されませんでした。
今回の問題の根本はもう少し根深いようです。
既存のコーディングに手を加えるときはトラブルが起こりがち
今回の僕のケースは、「他の誰かが数年前に制作したスマホ非対応のWebサイトを簡易的にスマホ対応させる」という案件で発生しました。
作業を始める前、ソースをぱっと見ただけでも、かなりメンテナンス性の低いコーディングをされているのがわかりました。
しかも小予算なので、それほど手をかけるわけにもいきません。
正直「何か面倒ごとが起こるだろうな」とは思っていました。
こういった、既存のWebサイトに手を加えるような案件では、そのWebサイトが古いものであるほど、何かしらトラブルが起こりがちです。
まぁ、いわゆる“あるある”ですね。
しっかりとしたルールに沿ってコーディングされ、仕様書が残っているような案件であればトラブルの危険性も低くなるでしょうが、そのような案件はなかなかあるものではありません。
それでも今回の案件ではこのフォントサイズ珍現象以外に大きなトラブルが起こらなかったのは幸いでした。
というわけで、今回は、iOSのSafariで意図せずフォントサイズが大きくなるのを防ぐ「-webkit-text-size-adjust: 100%;」という話をしました。
いかがだったでしょうか？
読んでくださったあなたの参考に少しでもなれば嬉しいです。
それではまた次回。
