テーブルのフォントがモバイル端末で小さく表示される場合の対処法

BloggerのHTML編集でテーブルタグを使用して、表を作成した際にテーブル内のテキストのフォントサイズ（文字の大きさ）が、パソコンでは他のテキストと同じサイズで表示されるにも関わらず、モバイル端末のブラウザーでページを表示すると、<td>タグ内（テーブル内のデータ）のテキストのフォントサイズが小さく表示されてしまう現象についてお問い合わせを頂きました。

モバイル端末で表示するとテーブル内の文字が小さくされる理由

モバイルが現在の様に幅広く普及する前、多くのサイトはモバイル端末の小さな画面での表示を考慮しないで設計されていました。モバイル端末のブラウザーは、デスクトップ（パソコン）のブラウザーとはウェブページをレンダリングする（描画する）方法が異なります。

モバイルブラウザーは、端末の画面の幅に合わせてページをレイアウトするのではなく、通常、800または1000ピクセル程度の幅のビューポートを使用してレイアウトを行います。端末の実際の画面サイズに合わせて縮小して表示させるか、描画のいち部を表示させるかのどちらかで表示します。

モバイル端末の画面に合わせてテキストを縮小するとテキストが非常に小さくなってしまうため、多くのモバイルブラウザーは、読み取りやすくするためテキスト拡大のアルゴリズムを適用しています。

このモバイルでのテキスト自動拡大設定が有効になっていて、ページ内のテキストが調整されても、そのテーブル内のフォントには適用されないと、テーブル内のフォントのみ小さく表示されます。

モバイル端末でもテーブル内の文字サイズを記事内の他のフォントと同じにする方法

以下のコードをCSSに追加します。

[html,body {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}]

コードの説明

text-size-adjust: none; は、ブラウザーのテキストサイズ調整を行わない基本設定です。モバイルのブラウザーの種類によって、コード名（プロパティ）が若干異なるので、MozillaとマイクロソフトのWindows Phone用のIEのコードなども含めています。

参照記事：

text-size-adjust - MDN web docs
-ms-text-size-adjust property - Microsoft Windows Dev Center

BloggerでのCSSへのコード追加方法

Blogger管理メニューの「テーマ」を選択し、表示されるプレビュー画面下の「カスタマイズ」を押します。

CSSの編集画面が表示されます。

「上級者向け」を選び表示されるサブメニューの項目から「CSSを追加」を選びます。カスタムCSS を追加の下にあるコード入力欄に設定を行うCSSのコードを追加して、右上の「ブログに適用」を押すとCSSの設定は完了します。設定後、「Bloggerに戻る」を選ぶと、管理画面が表示されます。

備考：
モバイルブラウザーでフォントサイズが変わってしまう現象はサイトで使用しているテンプレートの種類、ページにアクセスする端末や使用ブラウザーによって発生したりしなかったりします。本設定で、モバイル端末の画面を縦から横に変更して表示させた時にフォントサイズが変わることも防止します。