Skip to content

Instantly share code, notes, and snippets.

@jsoverson
Created February 15, 2013 20:06
Show Gist options
  • Save jsoverson/4963116 to your computer and use it in GitHub Desktop.
Save jsoverson/4963116 to your computer and use it in GitHub Desktop.
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);
@lucious7
Copy link

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

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

@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 via email

@EmmanuelVictor62
Copy link

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

In 2024, and this exact thing still deceived me😶

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