JavaScript browser detection?

Question

I need to add a certain kind of support for touch devices on a current project. As this is the first time I have to do something like this, I took a look at the code of some "well made" websites to see how they do that.

One page does something like this:

if(document.querySelectorAll && (navigator.platform == "iPad" || navigator.platform.substring(0, 6) == "iPhone" || navigator.platform == "iPod" || navigator.userAgent.indexOf('Android') > -1)) {...}

I tested it on all the devices I have at hand and it works, but please tell me, is it alright to do it this way? Is there a "correct" way to do it?

I am asking because here I've read that browser detection should be avoided, instead object detection should be used. Now I see that they are also testing for document.querySelectorAll which is object detection, so maybe everything that comes after it is just some sort of safety net?

Magus · Accepted Answer · 2013-03-07 07:51:52Z

1

Browser detection should be avoided, yes. Because a browser can change.

Today, maybe google Chrome don't support a feature. But tomorrow Chrome should be updated and support it.

So if you do something like if (!isGoogleChrome()), the day when Chrome is updated, you must update your code.

You should do object detection. For example, if you want to make sure that a function/object is here, just test it :

if (document.querySelectorAll !== undefined) {
    //...
}

You could also use http://modernizr.com/ , it can detect the current browser features for you.

answered Mar 7, 2013 at 7:51

Magus

15.1k4 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sven Over a year ago

The problem here is: Modernizr can't detect if the device has a touch screen.

Community · Accepted Answer · 2017-05-23 12:27:15Z

0

The code you use is very very sensible : any simple character insertion at the start would make it fail.

You could replace it with something like

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Mini/i.test(navigator.userAgent)) { ...

But you should be aware that detecting devices is dangerous as they might be more diverse that what one thinks : some have better CPU, network access or screen than some desktop browsers. So for most uses, it's better to detect the features you need.

This detection can legitimately, in my opinion, be used to detect touch screens if you plan to maintain your site depending on available devices but there are other solutions, for example libraries like Modernizr or specific tests.

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Mar 7, 2013 at 7:50

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

1 Comment

Phix Over a year ago

Good call on that last link. Feature detection is better than browser sniffing IMO for reasons above, but that last link is a good example of why and how to test for specific features.

Collectives™ on Stack Overflow

JavaScript browser detection?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related