閉じる

【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. chrome68

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

  2. GOOGLE日本語フォント

    GoogleFonts日本語 テスト公開中

  3. サイト内検索機能をGoogleカスタム検索で設置する

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

  5. WEBサイトの作成で利用できる2019年小規模事業者持続化補助金…

  6. css grid

    IE11に対応させる場合はCSS Grid Layoutを利用し…

ピックアップ記事

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