Created
February 15, 2013 20:06
-
-
Save jsoverson/4963116 to your computer and use it in GitHub Desktop.
Quick css hacks to target android/ios
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); |
Thanks. Framework7 does look very full featured. I’m hoping for something
simple that I can use utility classes on.
I’m serving up AR files on iPhones and only showing a 3D model on desktop.
I solved it a different way by using css to detect if touch is supported.
…On Sat, May 1, 2021 at 9:17 PM Egor A. Fedorov ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
@ckizer <https://github.com/ckizer>
Try Framework7 <https://framework7.io/>. Its Device
<https://framework7.io/docs/device.html> 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.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<https://gist.github.com/4963116#gistcomment-3728449>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AABOZ6Q6QLBJKTPZJHTPRJLTLTG55ANCNFSM4K4YP3SA>
.
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
@ckizer
Try Framework7. Its
Deviceutility 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.