アルパカログ

Webページで table タグを使用した際にPCのブラウザでは問題ないのに、iPhoneやiPadなどのiOS端末のSafariで見るとテーブル内のフォントサイズが変わってしまうことがあります（下記スクリーンショット）。

iOS端末で見るとテーブルのフォントサイズがおかしい

この記事では、iOSのSafariでテーブル内のフォントサイズが変わってしまう問題の解決方法を説明します。

この問題は、 table タグを用いたテーブル内の文字が表示領域に対して十分に多いときに発生します。

ただし、Chromeの開発者ツールでモバイルデバイスに切り替えても再現することはできません。

再現するには、iOSの実機デバイスかiOSシミュレータのSafariでWebページを閲覧する必要があります。

この問題を解決するには、下記どちらかのCSSを設定します。

テーブル関連の要素から white-space: nowrap; を削除します。

これによりテーブル内のテキストが折り返し可能になり、フォントサイズが変わることはなくなります。

body などに webkit-text-size-adjust: 100% を追加することでも勝手にフォントサイズが変わってしまう問題を防ぐことができます。

以上です。

この記事では、iOSのSafariでテーブル内のフォントサイズが変わってしまう問題の解決方法を説明しました。