閉じる

【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. SSH接続で使える初心者のためのUnix/Linuxコマンド

  2. GOOGLE MAPのカスタマイズに必要なAPIキーの取得

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

  4. chrome

    2017年9月の日本でのブラウザシェアとChrome62のフォー…

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

  6. LinkChecker

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

ピックアップ記事

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