閉じる

【CSS】Androidのみ文章の行間がせまい時はline-heightの設定を確認しよう

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

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

今回はその中でもよくある行間、CSSのline-heightの話です。

Androidのみline-heightの行間間隔がせまくなる

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

Androidのみline-heightが効かないのは、

CSSでline-heightを設定していない

事が原因でしょう。

Androidのみ文章の行間がせまい時の対象方法

例外があるかもしれませんが、Androidのみ行間がせまい、iPhoneで表示されているline-heightの表示にならない場合はline-heightを設定しない可能性があります。

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

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

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

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

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

CSSでイージミスに繋がるものはリセットCSSを活用して設定した方が良いでしょう。

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

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

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

 

関連記事

  1. FLEXBOX RESET

    floatやflexbox(display:flex)のリセット…

  2. chrome68

    Chrome68から非SSLサイトに「保護されていません」の警告…

  3. BlockchainをWebにどう活用するかw3cイベントで議論…

  4. Facebook Page Plugin(ページ プラグイン)埋…

  5. reCAPTCHA

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

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

ピックアップ記事

  1. reCAPTCHA
  2. キーワード
ページ上部へ戻る