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);

@ckizer
Try Framework7. Its Device utility class contains quite reliable methods and properties to detect OS, platform and device type. It covers most cases that are even possible to detect via WebView.

Thanks. Framework7 does look very full featured. I’m hoping for something simple that I can use utility classes on. I’m serving up AR files on iPhones and only showing a 3D model on desktop. I solved it a different way by using css to detect if touch is supported.

…

On Sat, May 1, 2021 at 9:17 PM Egor A. Fedorov ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ @ckizer <https://github.com/ckizer> Try Framework7 <https://framework7.io/>. Its Device <https://framework7.io/docs/device.html> utility class contains quite reliable methods and properties to detect OS, platform and device type. It covers most cases that are even possible to detect via WebView. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/4963116#gistcomment-3728449>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABOZ6Q6QLBJKTPZJHTPRJLTLTG55ANCNFSM4K4YP3SA> .

These are not CSS hacks, but rather a JavaScript OS detection. People come here via Google expecting CSS hacks.

In 2024, and this exact thing still deceived me😶

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.