Detect if Android or iPhone and show something based on results-CodePudding

I'm trying to display a link based whether a website visitor is use an Android or iPhone mobile device. But I can't seem to get this code I've been working on to actually work. Any help is much appreciated.

I've search Stackoverflow and Google for a solution and all I can find are partial solutions - but nothing I have found has proved successful as of yet.

Here's the code I've been trying to make work.

<p >iphoneclass</p>
<p >androidclass</p>

$(document).ready(function() {
  if (navigator.userAgent.match(/(iPhone|iPad)/)) {
    $('.android').hide();
  }
  if (navigator.userAgent.match(/(Android)/)) {
    $('.iphone').hide();
  }
});

CodePudding user response：

here how i check for users' device. maybe this works for you too.

const userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/android/i.test(userAgent)) {
    // android users
    $('.iphone').hide();
} else if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent)) {
    // ios users
   $('.android').hide();
}

CodePudding user response：

A simple but inelegant way is to try and detect the user-agent string.

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent

So, something like

const agent = window.navigator.userAgent;

And then you can try and match it against the device by doing some sort of regex search

https://deviceatlas.com/blog/mobile-browser-user-agent-strings