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