HTML作成でスマートフォン端末の実機確認をおこなった際、iPhoneとAndroidで見栄え、表示のされ方が違う事が多くあります。
Android独自の仕様というものが色々あります。
今回はその中でもよくある行間、CSSのline-heightの話です。
Androidのみline-heightの行間間隔がせまくなる
iPhone、iPad、IOSでは文字の行間が整っていて見栄えが良いのにAndroidでは行間の間隔が詰まっていて、せまく見えるケースがあります。
Androidのみline-heightが効かないのは、
CSSでline-heightを設定していない
事が原因でしょう。
Androidのみ文章の行間がせまい時の対象方法
例外があるかもしれませんが、Androidのみ行間がせまい、iPhoneで表示されているline-heightの表示にならない場合はline-heightを設定しない可能性があります。
iPhoneは文章の行間が見栄え良くなるようline-heightがデフォルトで設定されています。
Androidのデフォルト設定もline-heightの設定は０ではないんですが、デフォルトの設置値が小さく、かなりせまく見えるので設定が必要です。
Androidのみ文章の行間がせまく見える場合、styleのline-heightで行間を設定しましょう。
スマートフォンのページ作成、WEBアプリ完成後は端末で確認する
iPhoneの実機確認で見栄えが良いからAndroidで確認しないとトラブルになります。
CSSでイージミスに繋がるものはリセットCSSを活用して設定した方が良いでしょう。
Androidのみの表示はバグのように捉えられがちなのですが、これはAndroidの仕様によるものです。
iPhoneやPCのブラウザ、Chromeのデベロッパーモードを中心に表示を確認する方がいるかもしれませんが注意が必要です。
スマートフォンのページ作成後、WEBアプリ完成後は最低限iPhoneとAndroidの端末、実機で確認しましょう。
