トラブルシュート

Androidだけ文字が小さく見えるときに共有前に確認するチェックリスト

HTML共有後に「Androidで文字が小さくて読めない」と言われる前に、送信側が自分でチェックできる項目をまとめました。viewportの設定からCSSのfont-size単位、実機プレビューの手順まで、公開前に一度確認するだけでほとんどのAndroid表示崩れを防げます。

よくある原因

viewportメタタグの未設定が最多原因です。Androidブラウザはviewportがないとページ全体をデスクトップ幅として扱い、画面に収めるため全要素を縮小します。結果として本文が4〜6px相当になり、読めないと報告されます。チェックリストの最初の項目として必ずHTML内を検索してください。

font-sizeにvwやvhを使った場合も小さくなります。デスクトップで`2vw`は大きく見えますが、画面幅375pxのAndroidでは7.5pxになります。また`em`の入れ子が深いと、親要素のfont-sizeが小さい場合に意図より縮んでしまいます。段落テキストはすべてremかpxで指定するとトラブルが減ります。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

自分側で確認すること

公開前チェックリスト:(1)「viewport」で文書内検索してmeta viewportタグの存在を確認。(2)CSSでfont-sizeにvw/vhを使っているセレクタを抽出し、本文要素かどうかを確認。(3)Chromeデバイスツールバーでモバイル表示に切り替え、段落テキストのcomputed font-sizeが14px以上あることを確認。

ギガサイト便でアップロード後、共有URLをAndroid実機で開いてみるのが最も確実です。手元にAndroid端末がなければ、ChromeのDevTools→Sensors→User agentでAndroid端末を模擬設定した上でリロードするとWebViewに近い動作を再現できます。ピンチアウトなしで本文が読めるかが合格基準です。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

相手側で確認すること

受け取り側にもチェックしてほしい項目があります。「Chromeのアドレスバーに`chrome://settings/accessibility`と入力し、テキストの拡大縮小が100%になっているか確認する」という手順をメッセージで送ると、受信者側の設定起因を除外できます。

また、相手が古いAndroid(6.0以前)を使っている場合、HTMLのdoctypeが`<!DOCTYPE html>`でないとQuirksモードで描画され文字サイズが狂うことがあります。相手に「設定→デバイス情報」でAndroidバージョンを確認してもらい、古ければdoctypeを先頭行に追加した修正版を送り直す対応が有効です。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止の運用

毎回使えるHTMLひな形を作成し、`<meta name="viewport" content="width=device-width, initial-scale=1">`と`body { -webkit-text-size-adjust: 100%; font-size: 16px; }`を必ず含める状態にしておきましょう。AIに生成させる際もこのひな形を先頭に貼り付けてから指示すると、viewportが消えるリスクが大幅に下がります。

共有するたびにギガサイト便のプレビューURLを自分のスマートフォンで開く「共有前セルフチェック」をルール化するだけで、受信者からの問い合わせ数は減ります。特に新しいAIモデルで生成したHTMLは初回に必ずモバイル確認する習慣をつけると安心です。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

チェックリストをすべて確認したのにまだ一部の端末で小さく見えます

特定メーカーのAndroid(Samsung Internetブラウザなど)は独自のフォント設定を持ちます。Chromeではなく別ブラウザで開いていないか相手に確認し、Chromeでの表示に問題がなければブラウザ固有の問題として対処が必要です。

font-sizeをremで指定しているのに小さくなります

html要素にfont-sizeが指定されており、それが小さい可能性があります。`html { font-size: 62.5% }`などのリセット設定が残っているとrem基準値が10pxになり、本文が極端に小さくなります。html要素のfont-sizeをDevToolsで確認してください。

メールで送ったHTMLと、ギガサイト便で共有したURLとでAndroidの表示が違います

メールのHTMLビューアはWebViewの制限版を使うため、CSSの一部プロパティが無視されます。メールへの直接添付は表示保証が難しく、ギガサイト便のURLを本文に貼る形式の方がブラウザで開くため表示が安定します。

関連記事

トラブルシュート

Androidだけ文字が小さく見えるときの原因と直し方

AI生成HTMLをAndroidで共有したら文字が小さくなるトラブルに直面した方向け。viewportメタタグの不備やfont-sizeの単位ミスなど主要な原因を解説し、修正手順を具体的に示します。

5分で読める
「トラブルシュート」の記事をもっと見る →