Hi @RobE

You can use window.navigator property to expose the userAgent that’ll get you what you need.

So try doing console.log(window.navigator.userAgent) . You can then hide/show elements on your page using Javascript/Jquery.

Hope this helps!

Malik

Hi @Malik

thank you for the info. I was able to read about the navigator functionality and it looks like it could work for me. I’m not a programmer and would like to understand the code better so i can midufy it by myself. Could you provide me an example of how this JS would works in unbounce?

Thank you!

Hey @RobE …

Here is a quick JS for you;

<script>

  var userAgent = window.navigator.userAgent;

  console.log(userAgent);

  if (userAgent.search("Mac") > 0 ) {



    $( "#lp-pom-text-398").hide(); //ID of whatever element you want to hide on Mac



    

  } else if (userAgent.search("Windows") > 0)  {

     $( "#lp-pom-text-9" ).hide(); // //ID of element you want to hide on Windows

  }

 </script> 

In this Javascript I am indetifying between Windows and Mac and displaying a message on the featured section accordingly.

You can see this in action here:

http://unbouncepages.com/os-identifier/

Hope that helps!

I’ll throw my input in here as well. I work with apps so I use this script all the time.

In my case I have multiple buttons that say “open in app” all stacked on each other in the builder and each button has it’s own url.

<script>

  var isMobile = {

            Android: function() {

                return navigator.userAgent.match(/Android/i);

            },

            BlackBerry: function() {

                return navigator.userAgent.match(/BlackBerry/i);

            },

            iOS: function() {

                return navigator.userAgent.match(/iPhone|iPad|iPod/i);

            },

            Opera: function() {

                return navigator.userAgent.match(/Opera Mini/i);

            },

            Windows: function() {

                return navigator.userAgent.match(/IEMobile/i);

            },

            any: function() {

                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());

            }

        };

         if(isMobile.iOS()){

     $("#lp-pom-button-20").css('display', 'none');

     $("#lp-pom-button-16").css('display', 'block');

    }else if(isMobile.Android()){

     $("#lp-pom-button-16").css('display', 'none');

     $("#lp-pom-button-20").css('display', 'block');

    }else{

     $("#lp-pom-button-16").css('display', 'none');

     $("#lp-pom-button-20").css('display', 'block');

    }

</script>

Detecting mobile device using user agent isn’t the best way to check if a user is using a mobile device since user agent strings can be spoofed easily. However, this method is still an easy way to check what device is being used by the user.

There is a JavaScript API built-in for detecting media. The JavaScript window.matchMedia() method returns a MediaQueryList object representing the results of the specified CSS media query string. You can use this method to detect mobile device based on the CSS media query.

<script>

$(document).ready(function(){

  let isMobileDevice = window.matchMedia("only screen and (max-width: 760px)").matches;

  if(isMobileDevice){

    // The viewport is less than 768 pixels wide

    //Conditional script here

  } else{

    //The viewport is greater than 700 pixels wide

    alert("This is not a mobile device.");

  }

});

</script>

You can use above script to do show/hide elements depending on the screen size.