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

very helpful!

good stuff!

Nice, thanks for sharing!
But shouldn't line 7 be: .on-device .visible-android, .on-device .visible-ios ?

Great stuff. Do you have antything to distinguish between phones and tablets?

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

This does not work for iPad Pro (at least with iOS 14) since its userAgent string is like the following:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Does this still work?

I'm confused which combinations of classes would I add to an item that I only want to appear on Android+iPhone. AKA only visible on mobile devices and not desktop.

@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.