Detect if device is touch enabled and below a certain screen size

Question

I would like to activate/disable :hover depending on device, and I guess the best way is to check if the device is touch enabled and also detect the screen size, because of the newest laptops which also have touch screens. Is there a way to do this with javascript/jquery?

there are already quite some answers to these questions available on SO... — Reinder Wit, Jun 05 '14 at 11:08

score 1 · Answer 1 · answered Jun 05 '14 at 11:07

1

You can try

var is_touch_device = 'ontouchstart' in document.documentElement;

Another way to detect as follows:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

answered Jun 05 '14 at 11:07

score 0 · Answer 2 · answered Jun 05 '14 at 11:10

0

If this is an option, Modernizr will be able to detect touch (in addition to a bunch of other properties of the target browser/device): http://modernizr.com/ It will put an appropriate class on the html tag, which you can detect.

To detect screen size (oh well, browser window size), you can use this:

window.screen.availHeight
window.screen.availWidth

answered Jun 05 '14 at 11:10

Alexander Savin

6,202
3
29
41

More FYI, but Modernizr doesn't detect touch devices, just touch events: https://github.com/Modernizr/Modernizr/issues/548 – mikedidthis Jun 05 '14 at 11:18

score 0 · Answer 3 · answered Jun 05 '14 at 11:20

0

var touchDevice = (typeof (window.ontouchstart) !== 'undefined') ? true : false;

answered Jun 05 '14 at 11:20

Niels Steenbeek

4,692
2
41
50

score 0 · Answer 4 · answered Jun 05 '14 at 11:23

You can combine modernizr and media queries :

On the modernizr's download page you create a file with TOUCH EVENT checked. Modernizr will include a touch or no-touch class on your <body>

In your CSS for each :hover insert before a .no-touch. In the next sample, only screens with a width higher than 768px and without touch events will have an :hover.

/* CSS */
a{
    color:#DD0000; /* Dark red */
    text-decoration:none;
}
@media screen and (min-width: 768px) {
    .no-touch a:hover {
        color:#FF0000; /* red */
        text-decoration:underline;
    }
}

Detect if device is touch enabled and below a certain screen size

4 Answers4