閉じる

【CSS】Androidのみ余白や文章の行間がせまくなる時はline-heightの設定を確認しよう

本ページはプロモーション・広告が含まれています。

HTML作成でスマートフォン端末の実機確認をおこなった際、iPhoneとAndroidで見栄え、表示のされ方が違う事が多くあります。

Android独自の仕様というものが色々あります。

今回はその中でAndroidのみテキストや画像の余白、行間がせまくなる問題について説明します。

Androidのみ余白や行間が間隔がせまくなる

iPhone、iPad、IOSでは文字の行間が整っていて見栄えが良いのにAndroidでは余白や行間の間隔が詰まっていて、せまく見えるケースがあります。

Androidのみテキスト上下の余白がline-heightが効かない時は

CSSのline-heightを確認しましょう

 

例外があるかもしれませんが、Androidのみ余白や行間がせまく、iPhoneは正常に表示されている。このようなケースはline-heightを設定しない可能性があります。

iPhoneは文章の行間が見栄え良くなるようline-heightがデフォルトで設定されています。

Androidのデフォルト設定もline-heightの設定は0ではないんですが、デフォルトの設置値が小さく、かなりせまく見えるので設定が必要です。

Androidのみ文章の行間がせまく見える場合、styleのline-heightで行間を設定しましょう。

スマートフォンのページ作成、WEBアプリ完成後は端末で確認しよう

iPhoneの実機確認で見栄えが良いからAndroidで確認しないとトラブルになります。

CSSでイージミスに繋がるのでスマートフォンのCSSの特徴がわからない場合はリセットCSSを活用しましょう。

Androidのみの表示はバグのように捉えられがちなのですが、これはAndroidの仕様によるものです。

iPhoneやPCのブラウザ、Chromeのデベロッパーモードを中心に表示を確認する方がいるかもしれませんが注意が必要です。

スマートフォンのページ作成後、WEBアプリ完成後は最低限iPhoneとAndroidの端末、実機で確認しましょう。

 

関連記事

  1. LinkChecker

    ホームページ、htmlのリンク切れをチェックできるサービスとツー…

  2. Instagram(インスタグラム)のアクセストークン、APIが…

  3. 病院

    産婦人科、歯医者など病院のホームページ制作に最適なWordPre…

  4. GOOGLE日本語フォント

    GoogleFonts日本語 テスト公開中

  5. reCAPTCHA

    フォームの迷惑メール対策で有効なGoogle「reCAPTCHA…

  6. Tableのセルの余白や隙間をなくす、枠線を細くする初期化リセッ…

ピックアップ記事

  1. reCAPTCHA
  2. 日本語設定
ページ上部へ戻る