Fatal编程技术网
  • css/
  • Css 高DPI移动设备上一致的触摸目标大小？（WebApp场景）

Css 高DPI移动设备上一致的触摸目标大小？（WebApp场景）

css web-applications mobile

Css 高DPI移动设备上一致的触摸目标大小？（WebApp场景）,css,web-applications,mobile,touch,Css,Web Applications,Mobile,Touch,考虑到css像素不是高DPI设备上的设备像素，预测和管理这些设备上的触摸目标大小一直是我头疼的问题 例如，假设我有一个Web应用程序，其viewport meta“width=device width，initial scale=1.0”，在iPad（9.7英寸屏幕）上处于横向模式，viewport设置为1024px，而50px（css中）的物理大小大约为1cm 然而，对于Nexus 7（7英寸屏幕）等设备，viewport将设置为966px，因此50px（css）的物理尺寸仅为0.7cm。（更

考虑到css像素不是高DPI设备上的设备像素，预测和管理这些设备上的触摸目标大小一直是我头疼的问题

例如，假设我有一个Web应用程序，其viewport meta
“width=device width，initial scale=1.0”
，在iPad（9.7英寸屏幕）上处于横向模式，viewport设置为1024px，而50px（css中）的物理大小大约为1cm

然而，对于Nexus 7（7英寸屏幕）等设备，viewport将设置为966px，因此50px（css）的物理尺寸仅为0.7cm。（更不用说越来越多的高DPI设备，我可能无法使用）

不同的指南各不相同，但我倾向于选择1cm左右，以允许人为错误

对于这种情况是否有最佳实践？中描述的想法是我在谷歌上找到的最接近的想法，但还远没有准备好生产。

开始使用em或百分比，而不是px

这很可能会让每个人都有压力