These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.
I have been working on finding a way to target Androids or iPads/iPhones (separately) and this one I have worked out appears to do the job nicely.
[ Check the live test page for this droid-vs-idevice css here. ]
If your device is not responding, it could be your browser or your device are out of date. While not required for the base css hack, both device AND browser must respond with device pixel ratio > 1 to be rendering in hi-def modes. Check your browser here, and check your device at atmedia.info or at mqtest.io. The CSS below include the necessary stats.
This one is one I just made this weekend. It targets webkit (chrome/safari/android browser) but this one segregates itself from iOS devices. In other words, this one works on Android and Desktop/Laptop devices but not on iPad/iPhone.
Chrome on the iOS device I have (an iPad mini) uses the Safari engine, and responds like Safari, not like Chrome but still gets blocked on iPad via this hack. However, testing ‘Puffin’ on Android and iPad shows that Puffin (flash enabled web browser) responds like Chrome is supposed to — how it works on an Android device, and works the same on both types of devices, but does not report pixel ratio > 1 so it acts like a desktop browser. Puffin is NOT blocked on iPad via this hack, but Chrome and Safari are.
Please note: Android version 4 does NOT mean you have Android Browser version 4… I have seen Android versions 4 and above using Android Browser version 1. If your OS is up to date, but your browser is NOT up to date, it will not work for you. If you are unsure, check your user agent string, or simply go to whatismybrowser.org to tell you about your device and browser.
The tests are from many devices, running Android OS 4.0.1 and newer. It probably will work on 4.0.0 as well, but I have not tested on that version of the Android OS at this time.
/*
iOS Blocker
Safari 5.1+, Chrome 15+, Android OS & Browser 4+
Tested on Android 4.0.1+ with Android Browser 4
Desktops, Laptops, Mobiles
*/
_:-webkit-full-screen, :root .selector { property:value; }
Author: Jeff Clayton
If you wish to target hi-def mobiles, but not desktops/laptops:
/*
iOS Blocker
Chrome 15+, Android OS & Browser 4+
Mobiles (High-Definition)
*/
@media screen and (-webkit-min-device-pixel-ratio:1.1) {
_:-webkit-full-screen, .selector { property:value; }
}
Author: Jeff Clayton
Or conversely, if you wish to avoid hi-def mobiles but target desktops
(and old non-hi-definition mobiles) this should do the trick:
/*
iOS Blocker
Safari 5.1+, Chrome 15+, Android OS & Browser 4+
Desktops, Laptops, Old Mobiles (Not High-Definition)
*/
@media screen and (-webkit-max-device-pixel-ratio:1) {
_:-webkit-full-screen, .selector { property:value; }
}
Author: Jeff Clayton
Here is one for Safari 8 (non-iOS/non-mobile version)
/* Safari 8 (not iOS) */
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .selector { property:value; }
Author: Jeff Clayton
This one is only for Safari 6.1 and 7 (non-iOS as well so it would also not be for mobiles)
/* Safari 6.1-7 (not iOS) */
/* Desktops */
@media screen and (min-color-index:0) {
_:-webkit-full-screen, .selector {(; property:value; );}
}
Author: Jeff Clayton
The basic underscore hack is based on my previous hacks for Internet Explorer 10+ and 11+. Any Internet Explorer hack will of course not be iOS hacks, but they are included here for the fact that they are siblings.
/* Internet Explorer 11+ */
_:-ms-fullscreen, :root .selector { property:value; }
Author: Jeff Clayton
/* Internet Explorer 10+ */
_:-ms-input-placeholder, :root .selector { property:value; }
Author: Jeff Clayton
Both Internet Explorer and Firefox are non-iOS, so for Firefox
you have the same result by default using this method to target Firefox:
/* Firefox (all) */
_:-moz-tree-row(hover), .selector { property:value; }
Author: Jeff Clayton
IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind. See Test Pages: https://browserstrangeness.bitbucket.io and https://browserstrangeness.github.io
Jeff Clayton IT Director / Senior Software Engineer / Film & Photography 
[…] I have more about mobile phones and tablets here: https://jeffclayton.wordpress.com/2014/07/22/css-for-hi-def-mobile-retina-devices/ and here: https://jeffclayton.wordpress.com/2014/07/28/css-hack-anything-but-ios/ […]
LikeLike