How to set a Javacript code to only work on desktop and not on mobile

Question

Hello there (general Kenobi)

I'm working on a landing page hosted on a service called Unbounce. I set up a code i found online to set a sticky header but i modify it to make a form to follow all the way as the user scrolls down. Works great on desktop but on mobile it's affected by the desktop properties, so i was wondering if there's a way that the javacript is ignored when switching to the mobile view.

What i want to achieve is that the form remains sticky on the desktop view and centered and not sticky on the mobile view.

Hope that makes sense, english is not my primary language and also i'm not that proficient with code.

<script>
      //Fixed Menu (Header or footer) v1.3.1
  
  /**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
    * TS:0002-13-013
  */

  //Replace ID below with your own box ID
  var boxToAppend = '#lp-pom-box-16';

  //Set to 'header' or 'footer'
  var headerOrFooter = 'header';

  var backgroundCSS = {"position":"fixed", "left":"56%", "top":"113px", "bottom":"auto", "width":"379px", "z-index":"899"};
  var colorOverlayCSS = {"position":"fixed", "left":"56%", "top":"113px", "bottom":"auto", "width":"379px", "z-index":"auto", "border-style":"none none none none"};
  var childrenCSS = {"position":"fixed", "left":"56%", "top":"113px", "bottom":"auto", "width":"379px", "z-index":"999", "border-style":"none none none none", "border-width":"0px", "background":"none"};

  if (headerOrFooter === 'footer') {
    backgroundCSS["top"] = 'auto';
    backgroundCSS["bottom"] = '0px';
    colorOverlayCSS["top"] = 'auto';
    colorOverlayCSS["bottom"] = '0px';
    childrenCSS["top"] = 'auto';
    childrenCSS["bottom"] = '0px';
  }

  var boxParent = jQuery(boxToAppend).parent();
  var boxClone = jQuery(boxToAppend).clone()

  boxClone.appendTo(boxParent).css(backgroundCSS).children().remove();
  jQuery(boxToAppend).css(childrenCSS);
  jQuery(boxToAppend + '-color-overlay').appendTo(boxClone).css(colorOverlayCSS);
    
</script>

Thanks

i tried to use a simple code

<script>
  if ( lp.jQuery(window).width() <= 600 ) {

    // Your mobile code goes here

  }else{

    // Your desktop code goes here

  }      
</script>

but i didn;t do the trick.

Thanks for the help

Answer 1

If you want to detect if the client device is a mobile, you can do it using "navigator.userAgent". Using so you have all the device information from the user. You can have more information here And you can use it like this:

navigator.userAgent.match(/Android/i)
navigator.userAgent.match(/webOS/i)
navigator.userAgent.match(/iPhone/i)
navigator.userAgent.match(/iPad/i)
navigator.userAgent.match(/iPod/i)
navigator.userAgent.match(/BlackBerry/i)
navigator.userAgent.match(/Windows Phone/i)

This is an example of navigator.userAgent output, there you can play and get the information you need to detect some specific cases:

'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36'