1

I've found many resources online on how to detect if the user is navigating through a mobile device, but I need to check particularly if they are using a phone so I can use href="tel:" or else I should redirect them to another page. In my desktop browser, links to call phone numbers behave terrible: an error page that says that the address wasn't understood. So how do I detect if the user is using a phone that can make calls? Thanks

Haniver
  • 159
  • 8
  • 1
    This seems wrong-headed. You should just output `tel:` all the time. If your browser is behaving poorly, it is probably the outlier. I suspect most desktop browsers handle them just fine. For example, I would find your proposal very annoying, I expect phone numbers to be clickable on desktop to automatically start a phone call on my paired phone. – meager Nov 05 '18 at 19:07
  • Also https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery if you're interested in a jQuery solution. – meager Nov 05 '18 at 19:17

2 Answers2

1

I do not know if this is the best option but I have seen this multiple times.

Basically, you just check the client's user-agent if it looks like a mobile user-agent with something like :

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

This snippet will return true if the client is on mobile.

Seblor
  • 5,619
  • 1
  • 21
  • 38
0

It's practically impossible to detect if the user is using a "real phone". But depending on how important it is that it is a real phone or not there are more than one possible solution.

Checking the users User Agent is the most common one and probably the most "secure" as it either means that the user is on a phone or using a browser which is imitating a phone. There are a whole lot of guides on how to do this on the net.

Another way could be to check what screen size the user have and depending on the size, hide or show the link in question. This can be done by using CSS only if you want - with media queries - but could of course also be done with JavaScript.

If you use a package manager (npm, yarn etc) you can check for mobile-detect packages, there are loads of them, either use one or check how they did it and you should find a lot of good resources!

Jite
  • 5,542
  • 2
  • 22
  • 35