1

I want to create a website with responsive design. Now I would not only provide different CSS files for different resolutions. Ideally i will also provide different css files for different input devices. For example: Link should be shown larger for touchscreens, as for devices with mouse.

I can detect resolutions with CSS media querys, is there a way to detect touchscreens or general the type of input device?

kevinq
  • 109
  • 1
  • 17

1 Answers1

3

You can use a library like modernizr to detect features (like touch) and then apply styles based on that. Check it out here:

http://modernizr.com

donnywals
  • 7,241
  • 1
  • 19
  • 27
  • detect modernizr only the browser support for touch events, or also the availability of a touchscreen? – kevinq Jun 14 '13 at 11:19
  • I'm not sure about that, you might want to test on a touchscreen desktop to be sure about that. – donnywals Jun 14 '13 at 12:19
  • I have written a test, and it seems to be working. http://www.kevinquiatkowski.de/touchtest/ – kevinq Jun 18 '13 at 06:51