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の設定は０ではないんですが、デフォルトの設置値が小さく、かなりせまく見えるので設定が必要です。
Androidのみ文章の行間がせまく見える場合、styleのline-heightで行間を設定しましょう。
スマートフォンのページ作成、WEBアプリ完成後は端末で確認しよう
iPhoneの実機確認で見栄えが良いからAndroidで確認しないとトラブルになります。
CSSでイージミスに繋がるのでスマートフォンのCSSの特徴がわからない場合はリセットCSSを活用しましょう。
Androidのみの表示はバグのように捉えられがちなのですが、これはAndroidの仕様によるものです。
iPhoneやPCのブラウザ、Chromeのデベロッパーモードを中心に表示を確認する方がいるかもしれませんが注意が必要です。
スマートフォンのページ作成後、WEBアプリ完成後は最低限iPhoneとAndroidの端末、実機で確認しましょう。
