How do you detect between a Desktop and Mobile Chrome User Agent?

Question

For a Chrome Desktop Extension home page, I'm trying to detect whether a user is using Chrome for Desktop or Chrome for Mobile on Android. Currently the script below identifies Android Chrome the same as Desktop chrome. On desktop Chrome it should show "chrome" link; however, if someone is on Chrome for Android, it should show the "mobile-other" link.

Script:

<script>$(document).ready(function(){
    var ua = navigator.userAgent;
    if (/Chrome/i.test(ua))
       $('a.chrome').show();

    else if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile/i.test(ua))
       $('a.mobile-other').show();

    else
       $('a.desktop-other').show();
  });</script>

Chrome Android User Agent:

Mozilla/5.0 (Linux; <Android Version>; <Build Tag etc.>) AppleWebKit/<WebKit Rev> (KHTML, like Gecko) Chrome/<Chrome Rev> Mobile Safari/<WebKit Rev>

Sexcentenary

What happens if you change your else if (/Android|... to just an if (/Android|...? – Jotun

@Jotun That displays both buttons -- the "mobile-other" and "chrome button" – Sexcentenary

Ok, then swap the first if and the else if logic. – Jotun

Answer 1

The problem is the user agent will always have "Chrome" whether it is the desktop or mobile version. So you have to check the more specific case first.

$(document).ready(function(){
    var ua = navigator.userAgent;

    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(ua))
       $('a.mobile-other').show();

    else if(/Chrome/i.test(ua))
       $('a.chrome').show();

    else
       $('a.desktop-other').show();
});

Jotun

The current Chrome mobile version on iOS (v43.*) does not have Chrome in its user agent string. From the docs: "The UA in Chrome for iOS is the same as the Mobile Safari user agent, with CriOS/<ChromeRevision> instead of Version/<VersionNum>." – Deflagrate

Answer 2

Minimized test using Alert

// userAgent
const userAgent = navigator.userAgent;
console.log(userAgent);
if(/Chrome/i.test(userAgent)) {
alert('DESKTOP CHROME USER');
}

Jerold