| .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); |
good stuff!
Nice, thanks for sharing!
But shouldn't line 7 be: .on-device .visible-android, .on-device .visible-ios ?
Great stuff. Do you have antything to distinguish between phones and tablets?
These are not CSS hacks, but rather a JavaScript OS detection. People come here via Google expecting CSS hacks.
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
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.
@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.
very helpful!