小屏幕上,一些桌面端無關大雅的間距不等問題會變得突出。
Lofter是網易一款精品優雅的App,但其文章正文界面卻略有瑕疵:

可以看到段落右側與卡片的間距明顯大于左側。造成這個問題的原因是設計時對文本框的寬度與文字大小之間在關系考慮不周全,導致文字并不能完美地填充滿文本框。

上圖為iPhone5中此界面的放大效果并加上了輔助線,仔細觀察,去除黃色部分各20px的間距后,文本框寬度是558px,而正文使用的字號是30px,所以行末留下18px的空余空間。如果字號定為31px,則剛好可以放下18個字后填滿558px像素的文本框。
當然31px的字號在實際環境中可能并不是一個最合理的字號設定,因為它并不能被整除使用到@1x的iOS開發環境。在實際設計中,可以先設定一個柵格系統,以iPhone5為例,定義最小柵格為8x8px的話,得到如下一個柵格圖:

以8為基本單位,把所有字號、文本框寬度設定為8的倍數,這樣我們就可以確保漢字始終保持對齊。