スマホで窮屈になる原因は、文字サイズではない

幅390pxのスマホで、ある一列のレイアウトがひとかたまりに詰まっていました。

最初に思いついたのは文字を小さくすることです。3回下げましたが、そのたびにどこかが良くなって、別のどこかが悪くなりました。

測り方からしておかしかった

最初は「何行に折り返したか」で窮屈さを判断していました。この指標は、2つの場面で嘘をつきます。

要素が非表示になっていると、幅はゼロです。閉じたパネルは、測ればいつも1行で、完璧に見えます。

はみ出した部分が切り取られていると、行数は増えません。画面では文が半分消えているのに、数字の上では何も起きていません。

そこで、中身の実際の高さとコンテナの高さの比を測るように変え、要素が本当に表示されてから測るようにしました。

狭い画面で詰まるのは、どれか1つの要素が大きすぎるからではないことがほとんどです。よくあるのは、どの要素にも場所を譲ることが許されていない状態です。

メインの内容、補足の説明、日付とカテゴリ、操作ボタン。どのブロックも、自分は必ずそこにいるべきだと思っています。画面が狭くなると全員そろって細くなり、最後にはどれも読みにくくなります。

ブロックごとに階層を決め、画面がどこまで狭くなったら何をするかを書いておきました。

文字サイズは、それ以来一度も触っていません。