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