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
Copy link

DaveFlash commented Apr 13, 2016

very helpful!

@amoldavsky
Copy link

amoldavsky commented Jan 9, 2017

good stuff!

@lucious7
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
Copy link

kopitar commented Oct 23, 2018

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

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

@contfedorov
Copy link

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

@ckizer
Copy link

ckizer commented Apr 30, 2021

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.

@contfedorov
Copy link

contfedorov commented May 2, 2021

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

@ckizer
Copy link

ckizer commented May 2, 2021

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