WEARフロントエンドエンジニアのむーさん(@murs313)です！
iPadOSが出て、User Agentやらフォント太り問題やらで騒がれましたが、他にもこっそり変わっていることがありました…。
フォントサイズが変わってる！
小さい文字が大きくなって、崩れてるボタンがあるじゃないですか！！！
BEFORE & AFTER
あかんでえ…。
対応
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のサイトでは13,14pxより小さい文字が大きくなるようですが、同じ14pxでも変わる箇所と変わらない箇所などがあり、基準は謎…。
BEFORE (フォントサイズが変わる箇所を赤枠で囲っています)
AFTER
どこを大きくするかは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/