Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Olga Kireeva
Olga Kireeva
9,609 Points

How to build websites for touch-screens devices

I was recently working on creating a responsive image gallery. First, I created a gallery for big screen devices, and when I started applying media queries I realized that it’s not enough. jQuery mobile didn’t work for Android and I had to learn how to handle touch events in JavaScript. Now my image gallery supports the swipe gestures for mobile devices, but I still have lots of questions. My main question is what techniques we should use when creating modern websites for different types of devices. Nowadays even laptops have touch screens- how we can handle this. Are there any workshops or lectures on this topic offered on Treehouse?

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

As of the moment there is no reliable way of telling if a device has touch-screen.

The Popular Options:

  1. Detect with Media Queries (This works for mobile devices but will not detect larger touch screens such as touch-screen laptops).

  2. Javascript Ontouchstart (This unfortunately gives false positive on lots of mordern browsers and Windows 8 / Blackberry OS) (This is also what mordernizer uses to detect for touch-screens).

The problem lies with browsers as they do not have API to detect if the device is a touch-screen. Javascript/Jquery detection will throw false positives in most mordern browsers that are capable of using a touch-screen.

For example If you had a laptop running Chrome on Windows 8 it will always detect as a touch-screen in Chrome because Windows 8 is touch-screen enabled, even if the device is not touch-screen able.

Some Solutions:

  1. Assume everyone has a touch-screen. Include touch-screen and mouse/keyboard interaction to your gallery. This way there is no need to detect as both input options are viable. (bare in mind that CSS hover does not display correctly on most touch-screen devices) Some people might have touch-screens but still opt for using a mouse and keyboard, You do not want to force these users to use touch-screen input, users should have the choice to use the input method they are most comfortable with.

  2. Ask the user. Have a button or a question asking if the user would like to switch to a touch-screen enabled version, this would be the most reliable way of finding out if a user's device is touch-screen viable.

They are not perfect solutions but I think it may be some time till we see full support in mordern browsers to detect touch-screen devices.

Olga Kireeva
Olga Kireeva
9,609 Points

Thank you for the answer, Ashley :-) You clarified this question for me. I have never thought about browsers' API for touch screens - now I know. Also, I like your solutions and will keep them in mind. Thanks again!!!