Written by Kasumi

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%;を指定する事で、それが改善されます。

以上で完了です。

まとめ

バグではなく、単純にスマホブラウザの機能問題でした。。

ユーサビリティを考慮して、スマホではフォントサイズはあまり下げない方が良さそうです。

以上で解説を終わります。

目次

関連記事

プログラミング

ローグワンスターウォーズ・ストーリー映画のあらすじ・感想を解説![最後にネタバレ有り]

更新日:2020.02.09
278
プログラミング

【htaccess】サイトを引越!リダイレクト処理を書いてみよう

更新日:2020.06.12
574
WordPress プログラミング

【wordpress】トップページとは別に投稿一覧(アーカイブページ)を用意・表示する方法

2022.01.11
3343
HTMLCSS

【sass】@contentを使ってmediaクエリを簡略化する方法

2023.04.24
198