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

@ckizer

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

@ckizer ckizer commented May 2, 2021

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