gil00pita
1/18/2019 - 12:49 PM

CSS Touchscreen Detection

CSS Media query to check if the defice has Touchscreen.

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.
touchscreen.media.query.css
content_copyfile_download
@media (pointer:coarse) {
   
   // OVERWRITES 
   
}
touchscreen.media.mixin.scss
content_copyfile_download
@mixin isTouch {
  @media (pointer:coarse) {
    @content
  }
}