Skip to content

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.

Copy link

DaveFlash commented Apr 13, 2016

very helpful!

@amoldavsky

This comment has been minimized.

Copy link

amoldavsky commented Jan 9, 2017

good stuff!

@lucious7

This comment has been minimized.

Copy link

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.

Copy link

kopitar commented Oct 23, 2018

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

@donum

This comment has been minimized.

Copy link

donum commented Feb 27, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.