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
7

We ran into this issue with a client’s project and created a script to show or hide any desired element based on the device, OS or browser being used by the site visitor.

Here is a link to the tutorial video that goes through the problem as well as walking you through the solution.

If there are any questions please feel free to tag me!

Happy Friday!