JavaScript IF function to recognise mobile device

Question

I am currently creating a website where I have a sticky fixed header. The website is built on Bootstrap, however since I don't really like a lot of the Bootstrap headers, I decided to make a simple one myself.

http://quarndoncurtaindesign.besaba.com/

The sticky headers works fine with some minor problems. However on mobile it is a different story. Since obviously the header takes up a lot of room vertically, it takes up too much space on a mobile device.

I decided it would be best to keep the menu in its sticky state however I am using this Javascript to add a "sticky" class on some elements so I can target it in CSS.

   $(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
    $('header h1').addClass("sticky");
    $('p#tagline').addClass("sticky");
    $('ul').addClass("sticky");
    $('a').addClass("sticky");
    $('#top').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
    $('header h1').removeClass("sticky");
    $('p#tagline').removeClass("sticky");
    $('ul').removeClass("sticky");
    $('a').removeClass("sticky");
    $('#top').removeClass("sticky");
  }
});

Any advice pointing me in the right direction would be greatly appreciated.

possible duplicate of [Detecting a mobile browser](http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser) — Siguza, Jun 07 '15 at 14:56
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) — maxdaniel98, Jun 07 '15 at 14:56
I suggest you to try media queries where you can change the header depending on the device screen size — Shafeeque, Jun 07 '15 at 15:07

score 0 · Answer 1 · answered Jun 07 '15 at 15:06

It's good practice to use JS like this. By adding the class to the element you can then target the element using CSS.

There are a couple of issues with your approach however.

You only need to apply the 'sticky' class to the header. I don't see any reason why you would need to apply the sticky class to any other elements on the page.

Something like this should do the trick:

header.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}
body {
    padding-top: 100px /* Height of header.*/
                       /*This will offset the content below the header */
}

Also, I don't think you even need to a JS if statement here as the header will always be sticky.

If you are having problems with the mobile view then you should use media queries to correct the offset of the content below the header

score 0 · Answer 2 · answered Jun 07 '15 at 15:14

0

You might get more value out of CSS media-queries than JS code in this case. They will allow you to recognise devices by - amongst other things - their screen size, and to specify different layouts for different setups.

answered Jun 07 '15 at 15:14

Grizzled

101

score 0 · Answer 3 · edited May 23 '17 at 11:58

I agree with the first two answers that this is a use-case best suited for CSS and/or CSS media queries.

However, if you would still prefer to detect if the user is on a mobile device with JavaScript, you may be able to use the following (or a variation of the following) code:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

^ This code snippet was taken from https://stackoverflow.com/a/3540295/1525109

JavaScript IF function to recognise mobile device

3 Answers3