考虑到 css 像素不是高 DPI 设备上的设备像素,预测和管理这些设备上的触摸目标大小让我很头疼。
例如,假设我有一个带有 viewport meta 的 Web App "width=device-width, initial-scale=1.0"
,在 iPad(9.7 英寸屏幕)的横向模式下,viewport 设置为1024px,50px(在 css 中)的物理尺寸大约为1cm。
但是对于 Nexus 7(7 英寸屏幕)等设备,视口将设置为966px,因此50px(在 css 中)的物理尺寸仅为0.7cm左右。(更不用说我可能无法使用的越来越多的高 DPI 设备)
不同的指导方针因推荐的触摸目标尺寸而异,但我倾向于选择 1 厘米左右,以允许人为错误。
这种情况有最佳实践吗?Let's Get Physical (Units)中描述的想法是我通过谷歌找到的最接近的想法,但远未准备好生产。