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

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098