Media query to detect if device is touchscreen

Question

What is the safest way  using media queries  to make something happen when not on a touchscreen device  If there is no way  do you suggest using a JavaScript solution such as  window Touch or Modernizr

User · Accepted Answer

I would suggest using modernizr and using its media query features.

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

However, using CSS, there are pseudo class like, for example in Firefox. You can use :-moz-system-metric(touch-enabled). But these features are not available for every browser.

For Apple devices, you can simple use:

if(window.TouchEvent) {
   //.....
}

Especially for Ipad:

if(window.Touch) {
    //....
}

But, these do not work on Android.

Modernizr gives feature detection abilities, and detecting features is a good way to code, rather than coding on basis of browsers.

Styling Touch Elements

Modernizer adds classes to the HTML tag for this exact purpose. In this case, touch and no-touch so you can style your touch related aspects by prefixing your selectors with .touch. e.g. .touch .your-container. ^{Credits: Ben Swinburne}

User · Answer

The CSS solutions don t appear to be widely available as of mid-2013   Instead      Nicholas Zakas explains that Modernizr applies a no-touch CSS class when the browser doesn   t support touch   Or detect in JavaScript with a simple piece of code  allowing you to implement your own Modernizr-like solution    lt script gt      document documentElement className            ontouchstart  in document documentElement      touch      no-touch     lt  script gt    Then you can write your CSS as    no-touch  myClass              touch  myClass

User · Answer

This solution will work until CSS4 is globally supported by all browsers  When that day comes just use CSS4  but until then  this works for current browsers    browser-util js  export const isMobile       android       gt  navigator userAgent match  Android i     blackberry       gt  navigator userAgent match  BlackBerry i     ios       gt  navigator userAgent match  iPhone iPad iPod i     opera       gt  navigator userAgent match  Opera Mini i     windows       gt  navigator userAgent match  IEMobile i     any       gt   isMobile android      isMobile blackberry         isMobile ios      isMobile opera      isMobile windows         onload   old way   isMobile any     document getElementsByTagName  body   0  className     is-touch    null    newer way   isMobile any     document body classList add  is-touch     null    The above code will add the  is-touch  class to the body tag if the device has a touch screen  Now any location in your web application where you would have css for  hover you can call body not  is-touch  the rest of my css hover  for example   button hover   becomes   body not  is-touch  button hover   This solution avoids using modernizer as the modernizer lib is a very big library  If all you re trying to do is detect touch screens  This will be best when the size of the final compiled source is a requirement

User · Answer

There is actually a media query for that     media  hover  none            Apart from Firefox  it s fairly well supported  Safari and Chrome being the most common browsers on mobile devices  it might suffice untill greater adoption

User · Answer

In 2017  CSS media query from second answer still doesn t work on Firefox  I found a soluton for that  -moz-touch-enabled    So  here is cross-browser media query    media  -moz-touch-enabled  1    pointer coarse         something           its  working

User · Answer

adding a class touchscreen to the body using JS or jQuery      allowing mobile only css     var isMobile     ontouchstart  in document documentElement  amp  amp  navigator userAgent match  Mobi         if isMobile           jQuery  body   attr  class   touchscreen

User · Answer

This will work  If it doesn t let me know   media  hover  none  and  pointer  coarse           Touch screen device style goes here        edit  hover on-demand is not supported anymore

User · Answer

There is actually a property for this in the CSS4 media query draft      The    pointer    media feature is used to query about the presence and   accuracy of a pointing device such as a mouse  If a device has   multiple input mechanisms  it is recommended that the UA reports the   characteristics of the least capable pointing device of the primary   input mechanisms  This media query takes the following values          none      - The input mechanism of the device does not include a pointing device          coarse      - The input mechanism of the device includes a pointing device of limited accuracy          fine      - The input mechanism of the device includes an accurate pointing device    This would be used as such      Make radio buttons and check boxes larger if we have an inaccurate pointing device     media  pointer coarse        input type  checkbox    input type  radio             min-width 30px          min-height 40px          background transparent            I also found a ticket in the Chromium project related to this   Browser compatibility can be tested at Quirksmode  These are my results  22 jan 2013     Chrome Win  Works Chrome iOS  Doesn t work Safari iOS6  Doesn t work

User · Answer

Media types do not allow you to detect touch capabilities as part of the standard   http   www w3 org TR css3-mediaqueries   So  there is no way to do it consistently via CSS or media queries  you will have to resort to JavaScript   No need to use Modernizr  you can just use plain JavaScript    lt script type  text javascript  gt      var is touch device    ontouchstart  in document documentElement      if is touch device  alert  touch is enabled      lt  script gt

User · Answer

I was able to resolve this issue using this   media  hover none    hover on-demand     Your class or ID  attributes

[css] Media query to detect if device is touchscreen

Styling Touch Elements

Examples related to css

Examples related to touch

Examples related to media-queries