Streaming live at 10am (PST)

Detect IOS Device and Display Button only if on IOS


#1

We are designing a site for an iPad app. They have asked that we only display the ‘download now’ button on iPads. Is it possible to run a script to detect IOS and only show in that scenario?

I had initially tried to do this with just break points, but the landscape iPad shows the desktop version given the pixel width.

Thanks!

LJB


#2

Only by custom code

https://www.learningjquery.com/2017/02/how-to-use-jquery-to-detect-devices

First use alert() to check if the code works fine.

WEBFLOW: Show the button on webflow (Otherwise its hard to edit/style the button). Add to this button some class (to select by Jquery - for example: download-now-button).

And hide by js (if not ios - hide the button):

<script>    
 if (!ios) {
         /* select the button by class name and hide */
        $('.download-now-button').css("visibility", "hidden");
  }
</script>

I never try this - but it should work fine (also search for codepens)


#3

Full code - copy-paste before body (I dont have IOS to test this) + create unique class for the button (Otherwise you effect other buttons/elements) + later remove the alert()

<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 the device is not ios hide the download button */
if(!isMobile.iOS()){
       alert('not-ios-hide-download-button');  
       $('.download-now-button').css("visibility", "hidden");
};
</script>