Quick css hacks to target android/ios

device.css

.visible-android {
  display:none;
}
.visible-ios {
  display:none;
}
.on-device .visible-android, .on-device .visible-android {
  display:inherit;
}
.device-ios .visible-android {
  display:none !important;
}
.device-ios .hidden-ios {
  display:none !important;
}
.device-android .hidden-android {
  display:none !important;
}
.device-android .visible-ios {
  display:none !important;
}

device.js

var classNames = [];
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/i)) classNames.push('device-ios');
if (navigator.userAgent.match(/android/i)) classNames.push('device-android');

var html = document.getElementsByTagName('html')[0];

if (classNames.length) classNames.push('on-device');
if (html.classList) html.classList.add.apply(html.classList, classNames);

I have a short javascript code for resolving this. This will create the css classes show-on-android and show-on-ios. When using them, elements will be hidden if the platform does not match:

    const isAndroid = navigator.userAgent.match(/android/i);
    const isiOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/i);

    let style = document.createElement('style');
    style.innerHTML = `.show-on-android { ${isAndroid ? "" : "display: none;"} }`;
    style.innerHTML += `.show-on-ios { ${isiOS ? "" : "display: none;"} }`;
    document.getElementsByTagName('head')[0].appendChild(style);

Note: This code uses modern JavaScript.