CODEWITHSUNDEEP
cssweb-applicationsmobiletouch
bitinn
bitinn

Reputation: 9338

Consistent touch target size on High DPI mobile device ? (WebApp scenario)

Considering a css pixel is not a device pixel on high DPI device, predict and manage touch target size across these devices have been a headache for me.

For example, say I have a Web App with viewport meta "width=device-width, initial-scale=1.0", on iPad (9.7 inch screen) in landscape mode, viewport is set to 1024px, and 50px (in css) is roughly 1cm in physical size.

However for device such as Nexus 7 (7 inch screen), viewport would be set to 966px, thus 50px (in css) is only about 0.7cm in physical size. (Not to mention a growing list of High DPI device that I may not get my hands on)

Different guideline varies on recommeneded touch target size, but I tend to prefer around 1cm to allow for human error.

Is there a best practice for such scenario? the idea described in Let's Get Physical (Units) is the closest I found via google, but far from production ready.

Upvotes: 3

Views: 732

Answers (1)

Ledivin
Ledivin

Reputation: 637

Start using em or percentages instead of px.

This is probably going to be what pushes everyone over the line.

Upvotes: 0

Related Questions