Instantly share code, notes, and snippets.

Embed
What would you like to do?
Quick css hacks to target android/ios
.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;
}
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);
@DaveFlash

This comment has been minimized.

DaveFlash commented Apr 13, 2016

very helpful!

@amoldavsky

This comment has been minimized.

amoldavsky commented Jan 9, 2017

good stuff!

@lucious7

This comment has been minimized.

lucious7 commented May 16, 2017

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

@kopitar

This comment has been minimized.

kopitar commented Oct 23, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment