SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2011
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can JavaScript - or any other language - detect touchscreens?

    Hi,

    We have to consider that the use of touchscreens is on the rise and that we may have to adapt our code to that. For example, menu items and other links will have to have a great enough touch margin. But that can have unwanted aesthetic effects. Is there a way to detect that a visitor uses a touchscreen, so that we can cater to that only when needed?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Sure, use modenizr.

    Include this on your page, then you can do:

    Code JavaScript:
    if (!Modernizr.touch){
      ...
    }

    See also: http://stackoverflow.com/questions/3...ith-javascript

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2011
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Pullo. I thought chances were so slim that I didn't bother searching the net, but went straight to the specialists here with that question. But it is quite possible. I only hope that it is cross-browser, and then I mean the rather unreliable proprietary browsers that many touch devices have.

    But still, thanks.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    No problem
    I was also pleasantly surprised to find out how easy it is.
    (Although be aware, Modenizr is sometimes prone to false positives)

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,210
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I'm not sure of the exact correspondence of touch screens to @media query recognition, but you can target more advanced smart phones with CSS @media rules, so that might be the answer to your need here.

    On the horizon, we will soon be able to detect all sorts of things, like how much bandwidth the device is currently supporting and how much charge its battery has. So presumably there will be ways of detecting if there is touch functionality, too (if not already). It just may not be necessary for what you want to do here. CSS3 is the easy way.

    Edit:

    Had this post open for longer than I realized. Lots of answers posted in the mean time, so this may not be relevant.


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
  •