Issue detecting non-mobile device in javascript

Question

I have a script that will detect iPhone/iPad and Android devices, but having trouble singling out Desktop/Laptop devices. When viewing the page on an iPhone/iPad, it triggers an alert for "iDevice" first, then an alert for "Desktop". I need to be able to show a different form, based on what platform the user is viewing the page on (iPhone/iPad, Android, Windows Phone, Desktop/Laptop (non mobile devices)). I'm not trying to target resolution, I'm trying to target PLATFORM.

HTML

<div class="iDevice">iDevice</div>
<div class="android-view">Android Device</div>
<div class="desktop">Desktop</div>

Javascript

    $("#email").hide();
$(".desktop").hide();
$(".iDevice").hide();
$(".android-device").hide();
$('#checkbox').change(function () {
    $('#email').slideToggle();
});

if((navigator.platform === 'iPhone') || (navigator.platform === 'iPad')){
alert("iDevice");
    $(".iDevice").show();
    $(".android-view").hide();
    $(".desktop").hide();
}

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
alert("Android");
    $(".iDevice").hide();
    $(".android-view").show();
    $(".desktop").hide();
}

else if ((navigator.platform != 'iPhone') || (navigator.platform != 'iPad' ) || (isAndroid === false)){
alert("Desktop");
    $(".desktop").show();
    $(".iDevice").hide();
    $(".android-view").hide();
}

JSFIDDLE: LINK

Are you trying to tell a user what phone their using or use specific JavaScript actions for different devices because of functional support? If the latter, I would say you should do Feature Detection with something like [`has.js`](https://github.com/phiggins42/has.js/) or [`Modernizr`](https://modernizr.com/) instead. Additionally, hiding and showing large chunks of a page based on device is foolish as well. You should instead try doing `Responsive Design` using CSS and the like. — zero298, Sep 15 '15 at 21:18
These days, it's really a folly to lump devices into a specific category because there's a full continuum. Where's the dividing line between a phone and a tablet? Where's the dividing line between a tablet and a laptop? There is none. You can buy a laptop that can be a tablet or you can buy a tablet that can be a laptop. Instead, look at the capabilities the platform has (screen size, touch, etc...) and adjust your UI based on only that. They you offer a UI that is usable regardless of what category the device is in. — jfriend00, Sep 15 '15 at 21:19
And, what makes something non-mobile? Are you going to somehow detect that the device has no battery or has no wireless because pretty much everything else is mobile in some way these days. — jfriend00, Sep 15 '15 at 21:21
The solution to my question is much simpler than this, @jfriend00. The idea is that the user will see a different form based on the device they are on. It has nothing to do with conceptual ideas of what makes a device a device. It's simply "if this device is on iOS, show this form", if this device is an Android platform, show this form", and if the user is on a desktop/laptop, show this form". My script is working for iPhone/iPad and Android, but having an issue singling out non android/iOS devices. I tried to say if the device is neither of these, than show this. — Matt, Sep 15 '15 at 21:26
@Matt - but why do you show a different form if it's a laptop vs. a tablet vs. a large phone? That desire seems folly from the beginning. — jfriend00, Sep 15 '15 at 21:30
@jfriend00 - The idea is to capture different information based on the device. However, the reason why is irrelevant. It's not a matter of screen size, but device type that is my concern. — Matt, Sep 16 '15 at 00:11

score 0 · Answer 1 · edited May 23 '17 at 12:03

Unless you have a specific need to show content based directly on the device, you should practice Responsive Design. The idea is to style your content for different screen sizes, layouts, or whatever, with CSS and, if need be, Media Queries. Additionally, if you need to have your JavaScript perform different actions based on API availability, you should use a Feature Detection library such as has.js or Modernizr.

That being said though, if you still want to pursue displaying content based on device, one glaring problem that I can see is that your if statements are incorrect:

if (navigator.platform === 'iPhone' || 'iPad'){} resolves to 'iPad' which is truthy.

You need to use a compound if statement like:

if ((navigator.platform === 'iPhone') || ((navigator.platform === 'iPad')){}

This goes for all of your other if statements as well.

Another alternative is to use a regex.test() as was done in another question: Detect if device is iOS.

Additionally, trying to navigate the mess that is the userAgent string will drive you mad. Consider reading WebAim's History of the browser user-agent string in order to see why. I mean, unless you enjoy manhandling all the different user agent strings that Microsoft Internet Explorer has put out in order to trick servers into thinking that it isn't actually IE.

I've updated my code, but now the iPhone/iPad are hitting the iDevice then Desktop, as I'm seeing an alert for iDevice then Desktop. http://jsfiddle.net/mattography/86e48ebn/ — Matt, Sep 16 '15 at 20:01
@Matt Can you edit your question and include the values for `navigator.platform` and `navigator.userAgent` are for each device you want to target? I don't have access to them all which means helping you debug this is difficult. — zero298, Sep 16 '15 at 20:23

score 0 · Answer 2 · answered Sep 17 '15 at 14:41

I reworked my logic, and was able to separate the forms with the following mix of targeting navigator.platform and navigator.userAgent:

$("#email").hide();
$(".iDevice").hide();
$(".android-device").hide();
$('#checkbox').change(function () {
    $('#email').slideToggle();
});

//IF WINDOWS PHONE
if(navigator.userAgent.match("MSIE")){
    $(".iDevice").hide();
    $(".android-view").show();
    $(".desktop").hide();
}

//ELSE IF iPhone/iPad
else if((navigator.platform === 'iPhone') || (navigator.platform === 'iPad')){
    $(".iDevice").show();
    $(".android-view").hide();
    $(".desktop").hide();
}

//ELSE IF DESKTOP (NOT iPhone/iPad/Android/Windows Phone)
else if ((!navigator.userAgent.match("MSIE")) || (navigator.platform !== 'iPhone' || 'iPad' ) && isAndroid === false){
    $(".desktop").show();
    $(".iDevice").hide();
    $(".android-view").hide();
}

//IF IS ANDROID
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
    $(".iDevice").hide();
    $(".android-view").show();
    $(".desktop").hide();
}

Issue detecting non-mobile device in javascript

2 Answers2