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, 4 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, 4 years ago

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

Step, 4 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, 4 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

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098