0

I am putting together a landing page for my app. And I want it to show only the "App Store" icon if they are on an iOS device, but hide it from Android. And only the "Play Store" icon if they are on an Android device, and hide it from iOS users.

Can you please help?

Cheers!

orangecup
  • 1
  • But show both icons on a desktop. – orangecup Mar 10 '17 at 19:19
  • BTW: I would show at least a "alternatives" link or a small icon, I happen to browse often on my iPad looking for Android Apps or the other way around. – eckes Mar 10 '17 at 19:21
  • Ok! Noted. Thank you :) – orangecup Mar 10 '17 at 19:22
  • I am not a web developer, but it looks like there is no good CSS media query to recognize brands. So you need to use javascript (maybe modernizr) http://stackoverflow.com/questions/9038625/detect-if-device-is-ios or make it server side with the User-Agent header https://github.com/serbanghita/Mobile-Detect – eckes Mar 10 '17 at 19:28
  • You can use javascript for that. I do this in some of my website like this: const userAgent = navigator.userAgent.toLowerCase(); const isiPhone = userAgent.indexOf('iphone') > -1; const isiPad = userAgent.indexOf('ipad') > -1; – Paulo Mogollón Mar 10 '17 at 21:19

1 Answers1

0

You can use javascript to know if the user is in android or iOS and then add a hidden class to the item respectively.

I do it in some of my websites like this: 

var ua = navigator.userAgent.toLowerCase();
var isiPhone = ua.indexOf('iphone') > -1;
var isiPad = ua.indexOf('ipad') > -1;
var isAndroid = ua.indexOf('android') > -1;

Hope this can help you.

Paulo Mogollón
  • 536
  • 4
  • 6