StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Have you tried using this function? (This is the same as Modernizr used to use.)</p> <pre><code>function is_touch_device() { try { document.createEvent("TouchEvent"); return true; } catch (e) { return false; } } </code></pre> <p><strong>UPDATE 1</strong></p> <p><code>document.createEvent("TouchEvent")</code> have started to return <code>true</code> in the latest chrome (v. 17). Modernizr updated this a while ago. <a href="https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js" rel="noreferrer">Check Modernizr test out here</a>.</p> <p>Update your function like this to make it work:</p> <pre><code>function is_touch_device() { return 'ontouchstart' in window; } </code></pre> <p><strong>UPDATE 2</strong></p> <p>I found that the above wasn't working on IE10 (returning false on MS Surface). Here is the fix:</p> <pre><code>function is_touch_device() { return 'ontouchstart' in window // works on most browsers || 'onmsgesturechange' in window; // works on IE10 with some false positives }; </code></pre> <p><strong>UPDATE 3</strong></p> <p><code>'onmsgesturechange' in window</code> will return true in some IE desktop versions so thats not reliable. This works slightly more reliably:</p> <pre><code>function is_touch_device() { return 'ontouchstart' in window // works on most browsers || navigator.maxTouchPoints; // works on IE10/11 and Surface }; </code></pre> <p><strong>UPDATE 2018</strong></p> <p>Time goes by and there are new and better ways to test this. I've basically extracted and simplified Modernizr's way of checking it:</p> <pre><code>function is_touch_device() { var prefixes = ' -webkit- -moz- -o- -ms- '.split(' '); var mq = function(query) { return window.matchMedia(query).matches; } if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) { return true; } // include the 'heartz' as a way to have a non matching MQ to help terminate the join // https://git.io/vznFH var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join(''); return mq(query); } </code></pre> <p>Here they are using the non-standard <code>touch-enabled</code> media query feature, which I think is kinda weird and bad practice. But hey, in the real world I guess it works. In the future (when they are supported by all) those media query features could give you the same results: <code>pointer</code> and <code>hover</code>.</p> <p>Check out the <a href="https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js" rel="noreferrer">source of how Modernizr are doing it</a>.</p> <p>For a good article that explains the issues with touch detection, see: <a href="http://www.stucox.com/blog/you-cant-detect-a-touchscreen/" rel="noreferrer"><em>Stu Cox: You Can't Detect a Touchscreen</em></a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload