閉じる

【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のみline-heightが効かない場合はほぼこれだと思います。

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

Androidのデフォルト設定もline-heightの設定は0ではないんです。

ただし、かなりせまく見えるので設定が必要です。

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

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

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

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

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

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

 

関連記事

  1. レスポンシブデザインでCSSが効かない場合に確認すること

  2. 病院

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

  3. GOOGLE日本語フォント

    GoogleFonts日本語 テスト公開中

  4. chrome hosts

    Chromeでhosts設定を行える拡張機能

  5. IE

    2018年1、2月のブラウザシェアとIE使用率

  6. FLEXBOX RESET

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

ピックアップ記事

  1. ahrefs
  2. reCAPTCHA
ページ上部へ戻る