18

I'm showing a notification bar on my website, and frankly, it doesn't work well when its on a mobile device. I'd like to show the bar ONLY for desktop users.

What is the easiest way to determine if a user is on desktop or on mobile?

4
  • 5
    I think you should use media queries to determine actual capability instead of user-agents to determine supposed capability. Commented Mar 12, 2013 at 15:31
  • 1
    There really isn't one. You should explore why it doesn't work (what feature are mobile phones missing) and use feature detection and media queries to determine whether or not it should display.
    – Chad
    Commented Mar 12, 2013 at 15:31
  • instead of detecting mobile vs. desktop, I think, in your scenario, it makes more sense to detect screen resolution.
    – lbstr
    Commented Mar 12, 2013 at 15:32
  • The term "mobile devices" means less and less as device forms proliferate. Is a Microsoft Surface or Lenovo Yoga mobile? They've got touch screens and can work like tablets, and they've also got keyboards.
    – Pointy
    Commented Mar 12, 2013 at 15:34

8 Answers 8

13

A user agent check is the "easiest", though you could easily employ CSS3 media queries

Here is an example that checks iphone, android and blackberry; you could easily add other mobile browsers.

var is_mobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false;
6
  • Well I didn't downvote (it looks like nobody did now ...) but your regular expression is a little sparse.
    – Pointy
    Commented Mar 12, 2013 at 15:36
  • Fair enough, I wasn't trying to cover all mobile browsers, just providing an example of how it may be done. I suppose I should have stated that.
    – Rob M.
    Commented Mar 12, 2013 at 15:37
  • 1
    @Pointy very. Did not try for Windows Phone for example. Maybe the media queries is the best since every browser now a days implement it. Commented Mar 12, 2013 at 15:38
  • 1
    @partho it means "not not"; in practice, this casts a variable to a boolean value. So, any of the following would become false (null, undefined false, 0, '') and pretty much anything else would become true
    – Rob M.
    Commented May 30, 2015 at 18:30
  • @partho i means case-insensitive and g performs a "greedy" search of the sting, returning all matches instead of just the first
    – Rob M.
    Commented Jun 1, 2015 at 15:25
10

Check this http://detectmobilebrowsers.com/

Work for Javascript, jQuery etc.

3
  • The supplied code from the link works perfectly for me in an ASP.net website.
    – Greg Gum
    Commented Sep 15, 2013 at 13:18
  • 1
    God bless Chad Smith. Commented Feb 22, 2019 at 6:28
  • 1
    How do you make the javascript version work? I just get undefined when I run it. Commented Sep 2, 2022 at 17:19
7

I find that it's best to use feature detection. Use Modernizr to detect if it's a touch device. You can do things like:

var mousedown = 'mousedown';

if (Modernizr.touch) {
    mousedown = 'touchstart';
}

$('.foo').on(mousedown, handleMouseDown);

And then use CSS Media Queries for handling screen width (and it's also easy to detect screen width with javascript). That way you can correctly handle touch devices with large screens, or non-touch devices with small screens.

1
  • 2
    ... and you can hide/show/modify elements with CSS because Modernizr adds the class "touch" to the <html> element for touch devices. Thus, .touch #notificationBar { display: none; } ...
    – Pointy
    Commented Mar 12, 2013 at 15:39
2

If you are reading this post 2021, there is an even easier way to find this out.

let isMobile = window.navigator.userAgentData.mobile;
console.log(isMobile);

The above method simply returns a boolean value.

3
  • FYI: It is 2022
    – Michael M.
    Commented Sep 2, 2022 at 0:20
  • 1
    SNORT AUCHTUALLY... IT'S 2023 NOW, BUSTER! But for real, THANK YOU! I would have just used the big, outdated script Commented Sep 1, 2023 at 21:11
  • 1
    2024: userAgentData is still experimental and not supported in Safari and Firefox.
    – hector
    Commented May 9 at 15:01
0

If you use modernizr. a "no-touch" class will be added to the element. You could hide the bar by default and add a css rule to show the bar if the "no-touch" class exists. Example:

default:

.bar{display:none;}

desktop:

.no-touch .bar{display:block;}
1
  • 1
    that may not be optimal anymore since there are touch devices that are not explicitly mobile --> see surface pro (to be fair it can be a tablet which is mobile), touch laptops like lenovo, etc. and i'm sure a whole new host of touch devices will be coming
    – Daemedeor
    Commented Oct 16, 2015 at 19:52
0

If the user is on a mobile device this javascript 'if' will return true.

if (navigator.userAgent.indexOf('Mobile') !== -1) { ...

See also: https://deviceatlas.com/blog/list-of-user-agent-strings

0

The easiest way to differentiate between touch and non-touch devices is using media queries.

1) CSS to target Mobile/Touch Devices can be written using media query,

  @media (hover: none), (pointer: coarse) {}

2) CSS to target Desktop/Non-Touch Devices (only) can be written using media query,

  @media not all and (pointer: coarse) {}

On Few latest mobile devices (Eg: IOS 10+, one plus etc.,.) hover is detected hence we use, the (2) to identify non-touch devices.

0
 const is_mobile = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/BlackBerry/i);

if (is_mobile != null){
    popup.modal('show');
}
1
  • 4
    Please add an explanation to your code. Code-only answers are often discouraged. Commented Sep 17, 2020 at 13:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.