Content based on mobile OS?

  • 24 April 2020
  • 5 replies
  • 30 views
RobE

I am looking for a solution to display specific content to users based on their device operating system that they are using.

My question: Is there a way to recognize if a user is using iOS or Android while looking at a Landing Page?

The goal here would be to, for example, to display different buttons to App stores (Apple Store, Google Play store) on a sticky banner. Or activate/deactivate sections on the LP if it’s, let’s say, an Android user.

5 replies

Malik
Badge +1

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

RobE

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!

Malik
Badge +1

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!

Kyle.C
Userlevel 5

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>
N

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.

Reply


Terms & ConditionsCookie settings