Specific CSS rules for iOS (and Android) ?

Hi,

Is there a way to specify rules only applied on iOS (and, on another way, Android) ?
I insist : not depending on viewport size or similar.

Thanks.

roshodgekiss roshodgekiss, 5 years ago

Hi talvins, to my knowledge, the closest thing you can do for now is create WebKit-specific CSS rules, as to target iOS devices (which use WebKit), unlike all media query-compliant clients. Here's an example:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Your CSS */
}

The above is from this article, which is a great place to start. As an aside, you can target retina displays like so:

@media screen and (-webkit-min-device-pixel-ratio:2) {
  /* Your CSS */
}

Cheers, talvins! Let us know how you go.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
talvins, 5 years ago

Ok, but does this rule even affect all webkit based browsers (Safari, Chrome) ?

Step, 5 years ago

Both Safari and Chrome uses the WebKit rendering engine.


A email developer obsessed with gym, coding, design, music, and other things he doesn't understand. Twitter - http://twitter.com/#!/stephenho1mes
roshodgekiss roshodgekiss, 5 years ago

Step is right. However, -webkit-min-device-pixel-ratio:2 should in theory only target retina displays.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free