Improve UX on touch screen devices

[StefanBrand]

Today I had a cousin test the map on my Fairphone 1 and he told me several difficulties he discovered:

• Layer control check boxes are too small
• the content of the marker popups is too small
• often when you click on a marker, the map moves instead of that the popup opens

[StefanBrand]

Connected in a way to #27.

[StefanBrand]

often when you click on a marker, the map moves instead of that the popup opens

Can't reproduce this on my Fairphone 1. Must be his Nexus... ;)

[Roboe]

...or his fingers

[StefanBrand]

There is the L.Browser object. Do we want to have special code for mobile devices, or apply bigger design elements for all environments (desktop too)?

[StefanBrand]

I guess, this is the way to go: Introduction to CSS Media Queries

[Roboe]

I prefer bigger design for media="all". Less complexity for us, and desktop users are getting used to bigger elements anyway (Material Design is everywhere)

[StefanBrand]

Ok, my first attempt is to make the check boxes bigger. I'll have to read myself into CSS a bit.

[StefanBrand]

often when you click on a marker, the map moves instead of that the popup opens

If this pops up, there is a way to fix it: http://leafletjs.com/reference-1.0.2.html#map-taptolerance