Best method to detect desktop only (non-mobile)

Question

I've spend the last day researching a good deal and trying various methods using css media queries with the most common solution as targeting a min-width of 1200px. However with the introduction of hi-res mobile devices such as Amazon Kindle Fire HDX and some ridiculous 4K smart phones, this won't suffice.

I'm thinking to go down the route of using CSS media query to target a minimum width of 1200px in addition to a javascript library to detect mobile devices and invert the CSS of the media query.

I know of Modernizer but this has gone down the route of modular builds as opposed to a single CDN source. I'd prefer a light-weight library that is maintained to be up-to-date so I don't have to worry about future devices - any recommendations?

Finally... is there a more reliable and easier method to achieve desktop only detection?

An important note that I failed to mention is that I'm simply not concerned about device capabilities. I simply want to omit display of advertisements on the page if not mobile - this does not require any fancy features in the browser/device!

I know UA sniffing is a bad idea, but is it 100% certain that all mobile devices include the word "mobile" in the User Agent?

possible duplicate of [What is the best way to detect a mobile device in jQuery?](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery) — AlexGreg, Sep 11 '15 at 08:57
regarding the duplicate question, the answer shows a solution in both javascript and jquery — AlexGreg, Sep 11 '15 at 08:58
"Desktop" and "Mobile" aren't useful categories. What do you actually care about? Screen size? Network connection speed? Touch support? Test for what you actually care about. — Quentin, Sep 11 '15 at 09:01
Normally in web development, desktop vs mobile isn't a useful category - but in my situation that is all I need to know. Edited Q to reflect my purpose. I just need to know whether user is on a PC or laptop — Trung Nguyen, Sep 11 '15 at 09:13

hammus · Answer 1 · 2015-09-11T08:58:31.710

0

I dont know if this is the best way but I used to check if the ontouchstart event is on the window object - I try not to sniff for browsers as that's essentially was media queries were designed to replace.

var isDesktop = !('ontouchstart' in window);

A word of caution though: there are touchscreen laptops (I own a cheap one actually) and desktops. It is increasingly likely that this technique is not long for this world or at least not foolproof.

The best approach is always progressive enhancement

edited Sep 11 '15 at 08:58

answered Sep 11 '15 at 08:55

hammus

2,553
1
15
35

2

Laptop devices can also have a touch display? – Trung Nguyen Sep 11 '15 at 08:58
@TrungNguyen Was already typing that disclaimer as you commented :) – hammus Sep 11 '15 at 08:58
I know modernizer detects mobile devices using 'progressive enhancement' - however, for my purpose, I don't need to know about device capabilities. I simply need to know whether or not if target device is a desktop so that a particular function can be omitted – Trung Nguyen Sep 11 '15 at 09:02
1

Yes I understand, but progressive enhancement is a design philosophy not an implementation, so when I say the best approach is PE, I mean whatever your business logic needs are, you are going to have a headache if youre married to a solution that requires browser sniffing – hammus Sep 11 '15 at 09:06

Trung Nguyen · Answer 2 · 2015-09-11T10:44:31.690

So this is the solution I've come up with... There are 2 banner images (Google, Bing). Google banner only loads for mobile devices (including hi-res).

Comments and suggestions?

$(document).ready(function() {
  var md = new MobileDetect(window.navigator.userAgent);
  if (md.mobile()!==null) {
    var d = document.getElementById("banner1");
    d.className = d.className + " ismobile";
  }
  $('#output').html('isMobile: '+md.mobile());
});

div {
  width: 50%;
  margin: 10px auto;
}
img {
  width: 100%;
  height: auto;
}

/* Should be 1200, but 300 in this example because viewport too small in code snippet */
@media only screen and (min-width: 300px) {
  /* Do not display ads on desktop (large resolution) */
  #banner1 {
    display: none;
  }
  /* override for mobile devices with large resolution */
  #banner1.ismobile {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="//cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.2.1/mobile-detect.min.js"></script>
</head>
<body>
  <div id="output"></div>
  
  <div id="banner1">
    <img src="http://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </div>
  
  <div id="banner2">
    <img src="http://vignette2.wikia.nocookie.net/logopedia/images/c/c6/Bing_logo.png/revision/latest?cb=20101019022831">
  </div>
</body>

Best method to detect desktop only (non-mobile)

2 Answers2