閉じる

【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. 【CSS】ボタンのタップ、クリック時のオレンジやブルーの枠線を消…

  2. LinkChecker

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

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

  4. chrome hosts

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

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

  6. reCAPTCHA

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

ピックアップ記事

  1. 日本語設定
  2. キャプチャソフト
  3. ga4
ページ上部へ戻る