Edited at

iPadOSでフォントサイズが変わる

WEARフロントエンドエンジニアのむーさん(@murs313)です!

iPadOSが出て、User Agentやらフォント太り問題やらで騒がれましたが、他にもこっそり変わっていることがありました…。


フォントサイズが変わってる!

小さい文字が大きくなって、崩れてるボタンがあるじゃないですか!!!

BEFORE & AFTER

image.pngimage.png

あかんでえ…。


対応

bodyにtext-size-adjust: none;を設定すると解決します。

サポートしたいブラウザ・バージョンに合わせて、必要ならベンダープレフィックスも設定しましょう。

https://developer.mozilla.org/ja/docs/Web/CSS/text-size-adjust

text-size-adjust: none;

-webkit-text-size-adjust: none;


補足① フォントが大きくなる基準は?

WEARのサイトでは13px~14pxより小さい文字が大きくなるようですが、同じ14pxでも変わる箇所と変わらない箇所などがあり、基準は謎…。

BEFORE (フォントサイズが変わる箇所を赤枠で囲っています)

image.png

AFTER

image.png

どこを大きくするかはAppleの采配なんだろうか…。


補足② text-size-adjust: none;のバグ

こちらのブログにもあるように、text-size-adjust: none;を指定するとブラウザで拡大・縮小しても文字サイズが変わらないというChromeのバグがあったようですが、現在は直っています。


Instead of ignoring the -webkit-text-size-adjust property, a bug prevents desktop Chrome users from zooming in or out. The bug was fixed after Chrome 26.


(引用) https://developer.mozilla.org/ja/docs/Web/CSS/text-size-adjust


最後に

サイトを持っている方は、一度Simulatorでチェックしてみることをおすすめします!(最新のXcodeでiPadOSのSimulatorが使えます!)


すぺしゃるさんくす

今回のこの現象と対応法を共有してくださったのは、ZOZOTOWNフロントエンドエンジニアのあーさーさんです!(iPadOSのUser Agentの影響調査をしていたところ発見したそう)

あーさーさんと、情報共有ができる会社の風土に多大なる感謝を…!!

風通しの良い風土でWEARの開発をしたい方はJOIN US!!!

https://tech.zozo.com/recruit/mid-career/detail59/