JavaScript for Desktop or Mobile Detection

Question

I've been given some code for detecting if a user is using a mobile device or a desktop.

var user_agent = navigator.userAgent;
var mobile = /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/i;
if (!mobile.test(user_agent)) {
    $(".master-content").css({"width":"1280px","margin":"0 auto","overflow-y":"visible"});
    $(".off-canvas-wrap").css({"overflow":"visible"});
}

Can anyone tell me of a more reliable way to do this, or at least why this is a bad way for doing device detection?

Thanks

The best method is to use [feature detection](https://msdn.microsoft.com/en-us/library/hh273397%28v=vs.85%29.aspx) not environment detection. It doesn't matter what browser they are using if it supports what ever feature your using. — Liam, May 21 '15 at 13:01
Why don't u just detect the screen size and based upon that make a decision about mobile, tablet, or pc... — brso05, May 21 '15 at 13:02
So is there something wrong with that code, when doesn't it work? Generally you'd do feature detection, not browser or device detection, but in some cases, for instance when redirecting to a mobile version of a site, it's okay. — adeneo, May 21 '15 at 13:02
possible duplicate of [Best practice for detecting and formatting for mobile browsers](http://stackoverflow.com/questions/6624073/best-practice-for-detecting-and-formatting-for-mobile-browsers) — Igl3, May 21 '15 at 13:02
possible duplicate of [Detecting a mobile browser](http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser) — Hacketo, May 21 '15 at 13:04
@brso05 because some devices can be bigger than the smallest possible desktop monitor — Tom, May 21 '15 at 13:05
@avcajaraville I don't want to pull in a whole feature detection library if i only need to detect a couple of features — Tom, May 21 '15 at 13:06
@TomHalley if your only trying to decide how to position and style things then it doesn't matter...If you want to know what features the browser supports then it does matter. — brso05, May 21 '15 at 13:06
@Tom Halley you can customize it and detect only the feautures you want. Have a look to the documentation — avcajaraville, May 21 '15 at 13:08

score 1 · Accepted Answer · answered Jun 06 '15 at 19:20

There is nothing wrong with the code that you have provided. It might look really ugly but essentially, all you are doing is comparing the user's user agent against a regex of all the mobile device user agents and seeing if it matches or not.

The only foreseeable issue with this approach is that as new mobile devices enter the market, you will have to constantly be updating your list of unique identifiers. That being said, it appears that your current list covers >95% of the mobile devices today, so you should be fine.

As others have stated, there are other approaches to detecting mobile devices such as screen size, feature detection, etc. However, I have had the most success using user agents just like you have. If you want to cover even more mobile devices, I recommend using this open source mobile detection library that I've been contributing to: https://github.com/serbanghita/Mobile-Detect

JavaScript for Desktop or Mobile Detection

1 Answers1