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 DaveFlash commented Apr 13, 2016

very helpful!

@amoldavsky

This comment has been minimized.

Copy link

@amoldavsky amoldavsky commented Jan 9, 2017

good stuff!

@lucious7

This comment has been minimized.

Copy link

@lucious7 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 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 donum commented Feb 27, 2020

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

@contfedorov

This comment has been minimized.

Copy link

@contfedorov contfedorov commented Oct 9, 2020

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

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.