Results 1 to 9 of 9

Thread: Detect Touch Capability Javascript

  1. #1
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default Detect Touch Capability Javascript

    I've looked about the web, and except perhaps for one or more old versions of Chrome which might give a false positive on it I see that this is probably a quick and easy way to detect a touch device:

    Code:
    var touchcabable = 'ontouchstart' in document.documentElement;
    I'm not worried about old versions of Chrome as they update their browser mostly automatically without user intervention, anyone stuck with an older version has likely done so intentionally. And the consequences of a false positive are minimal in my planned usage of it anyway, as long as it works in the vast majority of cases. I get no false positive in my current version of Chrome.

    Here's the test page, I'm particularly interested in touch capable browsers of all kinds as I have none to test on, but any feedback as to the accuracy or lack thereof of the two report lines on this page is welcome:

    http://home.comcast.net/~jscheuer1/s...line/touch.htm

    There are just two lines:

    1.) On the first parse of the head this device/browser is not touch enabled
    2.) On document ready this device/browser is not touch enabled
    They of course both say is not for me, as I'm on an ordinary laptop running Win 7. If you have a touch device they should be:

    1.) On the first parse of the head this device/browser is touch enabled
    2.) On document ready this device/browser is touch enabled
    I used two statements just in case some devices couldn't report correctly until after the full page was parsed (#2).

    Like I said, please let me know what happens, and please include browser, device, OS, including version numbers for each of those.
    Last edited by jscheuer1; 12-30-2012 at 05:50 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Oooh, that looks like an exciting script

    Ok - I'm on iPhone 4S running iOS 6.0.1

    Mercury Browser v7.2 : 1 = is, 2 = is
    Chrome 23.0.1271.100 : 1 = is, 2 = is
    Safari (default installation) : 1 = is, 2 = is
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    HTC Rezound running Android 4.0.3

    Internet (default installation) - both enabled as expected
    Chrome 18.0.1025469 (latest) - both enabled as expected
    Firefox Aurora 19.0a2 (latest) - both enabled as expected

  4. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Acer A100 (Android 4.0.3 / Browser (default))

    looks fine. Great snippet.

  5. #5
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    It functions as expected on ye olde iPad 2, both say is (on any of my increasingly large number of browsers. (I don't even know why I test the other browsers, seeing how any browser on IOS has to use apple's mobile safari))
    Excellent snippet by the way, I'll have to use it in the future!
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  6. #6
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    I've looked about the web, and except perhaps for one or more old versions of Chrome which might give a false positive on it I see that this is probably a quick and easy way to detect a touch device:

    Code:
    var touchcabable = 'ontouchstart' in document.documentElement;
    I read on a thread somewhere that on a particular ms platform you need to test for 'onmsgesturechange' instead.
    I can't verify that, but to be on the safe side I would use:
    Code:
    var isTouchDevice = ( 'ontouchmove' in document.documentElement || 'onmsgesturechange' in document.documentElement )

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You're probably right, and then some. I found this after Googling 'onmsgesturechange':

    https://gist.github.com/4199058

    If you look at the change log you will see that they started out with the snippet I'd found and your suggested addition. And progressed to that:

    Code:
    var touch = !!window.Touch || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch);
    Anyways, here's a test page using the above logic:

    http://home.comcast.net/~jscheuer1/s...ine/touch2.htm

    Please test it to see if it works as well.

    BTW - None of the devices/browsers reported above would need this, but some others would. But I'm still curious to see if this new test page works even in the browsers already tested.
    Last edited by jscheuer1; 01-01-2013 at 08:19 AM. Reason: add demo/detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Quote Originally Posted by clueful View Post
    I read on a thread somewhere that on a particular ms platform you need to test for 'onmsgesturechange' instead.
    I can't verify that, but to be on the safe side I would use:
    Code:
    var isTouchDevice = ( 'ontouchmove' in document.documentElement || 'onmsgesturechange' in document.documentElement )
    I need to reprise this subject following a report that when testing one of my scripts under Chrome, the above test gave a false positive. I couldn't investigate the cause, but have since concluded that unless this information is needed at build time, the best way to detect a touchscreen must be simply to set a flag in a touchstart handler that acts on the whole document. In practice this should make the data available in time for use by combined event handlers that need it for branching.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Both of those are false here in my Chrome. I had seen something about that (false positives in Chrome), as I looked around the web at what people were writing about detecting touch. I got the impression though that it was a bug in Chrome that has since been fixed.

    For most purposes, as it turns out, my first post in this thread is sufficient.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Javascript Touch Slider
    By ipad22 in forum JavaScript
    Replies: 1
    Last Post: 09-12-2011, 04:49 AM
  2. Javascript to detect flash player
    By evan in forum JavaScript
    Replies: 5
    Last Post: 05-21-2009, 03:38 AM
  3. Replies: 0
    Last Post: 05-18-2009, 08:09 AM
  4. Database with query capability
    By jmaghen in forum MySQL and other databases
    Replies: 5
    Last Post: 05-06-2009, 09:45 AM
  5. Detect Firefox Javascript
    By cr3ative in forum Submit a DHTML or CSS code
    Replies: 9
    Last Post: 01-24-2008, 09:14 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •