$type=carousel$columns=4$cat=hide$show=home

$hide=page-404-mobile

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

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に戻る」を選ぶと、管理画面が表示されます。



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

コメント

BLOGGER

関連記事とスポンサーリンク

名前

AdSense,4,Blogger SEO,11,Blogger 活用法,22,Bloggerの基本機能と使い方,11,Bloggerの基本設定,7,MagOne,4,SNS,4,お勧め記事,16,お知らせ,1,その他,1,
ltr
item
Blogger101@ブロギングライフ : テーブルのフォントがモバイル端末で小さく表示される場合の対処法
テーブルのフォントがモバイル端末で小さく表示される場合の対処法
BloggerのHTML編集でテーブルタグを使用して、表を作成した際にテーブル内のテキストのフォントサイズが、モバイル端末のブラウザーでページを表示すると、タグ内のテキストのフォントサイズが小さく表示されてしまう場合の対処法
https://2.bp.blogspot.com/-XOzpKuEIdVQ/XdCZly5I6-I/AAAAAAAAADo/pOeA_-sydlYHTlF9C6i895B9C5JKagVLgCK4BGAYYCw/s640/Disable%2Btext%2Bsize%2Badjust%2Bon%2Bmobile%2Bdevices.png
https://2.bp.blogspot.com/-XOzpKuEIdVQ/XdCZly5I6-I/AAAAAAAAADo/pOeA_-sydlYHTlF9C6i895B9C5JKagVLgCK4BGAYYCw/s72-c/Disable%2Btext%2Bsize%2Badjust%2Bon%2Bmobile%2Bdevices.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2019/11/disable-text-size-adjust-on-mobile.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2019/11/disable-text-size-adjust-on-mobile.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む 返信 返信をキャンセル 削除 By Home ページ 投稿 全てを見る 関連記事 ラベル アーカイブ SEARCH 全ての投稿 お探しのページが見つかりませんでした。 ホームに戻る Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy 目次