cillay
commented
9 years ago Well, Modernizr works pretty well as far as the library approach goes.
Chrome console on Linux Desktop:
Modernizr.touch false
Chrome console on Galaxy S5 through chrome://inspect
Modernizr.touch true
The class names on <html> are "no-touch" and "touch", respectively. Oh great, it seems like I am going to have MC Hammer singing "You can't touch this" in my head for the next 48 hours,
Anyway, I think explicitly detecting touch capability with media queries is officially a CSS4 draft spec.
mattkendall
We need to add the controls UI to the screen for desktop devices. We could try to use a library/service to determine if the user's device is a touch device, but my guess is it'll be much easier to just use CSS media queries.
Files of interest:
On the main UI, you can see how the UI is changed (using flex-md, flex-gt-md, etc.) based on the user's device. More information on these tags and their abilities can be found in the Angular Material documentation.
In the Javascript file you can see how the map is created and reference the Google Maps V3 API to see how to create a map with controls.
The goal is to mash-up the two -- either always render the controls UI into a place that is hidden on smaller devices, or figure out how to only add the controls to the map javascript for large devices.