Detect IOS Device and Display Button only if on IOS

Design help Custom code
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://stackoverflow.com/questions/9038625/detect-if-device-is-ios

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>
1 Like
4

There is a a really nice API for this. You can detect the device type, brand, name, and more… and it is for free! You can find it on https://www.theapicompany.com

Hope this helps :slight_smile:

5

Sorry I provided the wrong URL. It’s updated now with the right one!

6

Thank you, it really help me. :blush:

1 Like