題字の道具 斬 ZANと浮世絵の道具 浮 UKIを iPhone で触ると、書体を選ぶ欄に触れた瞬間に画面が拡大し、絵が画面の外へ出た。ページには拡大を禁止する指定を入れてあった。それでも寄る。
この研究を一言でいうと──字を打つ欄は、スマホでは 16px 以上にする。
引き金は、欄の字の大きさ
iPhone は、触った欄の字が 16px より小さいと、読めるように画面を拡大する。ページの拡大を禁止する指定(maximum-scale・user-scalable)は、この自動の拡大には効かない。止まらないのに、指で広げる操作だけが塞がる。
| 道具 | 欄 | 直す前(16px 未満) | 直した後 |
|---|---|---|---|
| 題字の道具 | 3 | 3(14px) | 0 |
| 浮世絵の道具 | 5 | 4(14px) | 0 |
スマホのときだけ大きくする
パソコンでは 14px の方が道具の画面に収まる。画面の幅が狭いときと、指で触る端末のときだけ、字を打つ欄・選ぶ欄を 16px にした。パソコンの見た目は1画素も変えていない。
- 寄るのは、字を打つ欄・選ぶ欄・複数行の欄。
- つまみ(スライダー)や色を選ぶ欄は寄らないので触らない。
- 欄の字は、細かい指定に負けないよう、スマホのときだけ強く指定する。
- 確かめるときは、スマホの画面で「16px 未満の欄」を数える。
あなたのフォームは、触った瞬間に画面を動かしていませんか。
— 他の研究を読む