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); |
This comment has been minimized.
This comment has been minimized.
good stuff! |
This comment has been minimized.
This comment has been minimized.
Nice, thanks for sharing! |
This comment has been minimized.
This comment has been minimized.
Great stuff. Do you have antything to distinguish between phones and tablets? |
This comment has been minimized.
This comment has been minimized.
These are not CSS hacks, but rather a JavaScript OS detection. People come here via Google expecting CSS hacks. |
This comment has been minimized.
This comment has been minimized.
This does not work for iPad Pro (at least with iOS 14) since its userAgent string is like the following: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
very helpful!