tableタグのtd、thに入ってる文字がスマホだとサイズがおかしくなる原因【改善】
こんにちは、カスミです。
さて以下のような事で悩んでいませんか？
tableタグのtd、thに入ってる文字がスマホだとサイズが一部おかしくなったりするバグがたまにある。
指定してるフォントサイズで統一したい。
上記のような問題を本記事で解決致します。
tbodyタグに-webkit-text-size-adjustプロパティを付与
tbody {
-webkit-text-size-adjust: 100%;
}
tableタグの子要素にtbodyタグが入ってる、もしくは自動で生成されていませんか？
tobodyタグにCSSで上記プロパティ-webkit-text-size-adjust: 100%;を付与してみましょう。
スマホでの一部フォント崩れが修正されたかと思います。
原因としては、スマホ（iphone等）のブラウザ機能として、ユーサビリティを考慮し、フォントサイズを上げてる可能性があります。
-webkit-text-size-adjust: 100%;を指定する事で、それが改善されます。
以上で完了です。
まとめ
バグではなく、単純にスマホブラウザの機能問題でした。。
ユーサビリティを考慮して、スマホではフォントサイズはあまり下げない方が良さそうです。
以上で解説を終わります。
目次