Email: how to target Outlook, Android and IOS

This is an example of how you can use a style sheet and a few classes to show/hide content in an email depending on the email client.

by Wally Glenn

HTML

<body>

<!--[if mso | IE]>
  <b>Outlook Only</b>: url://that-works-with-outlook
<![endif]-->
<!--[if !mso 9]><!-->
<span class="android"><b>All Email Clients</b>b>: https://myapp/mainpage?param=123</span>
<span class="webkit" style="display: none;"><b>Webkit-only</b>: myapp://mainpage?param=123</span>
<![endif]-->

<p>
Note, If you are using a Safari or Chrome, only the webkit link will show in the results.
</p>
<p>
If you use IE, only the IE link will show in the results.
</p>
</body>

CSS

<style>
	  .android {
		display: block;
	  }
	  .webkit {
		display: none;
	  }

	  @media screen and (-webkit-min-device-pixel-ratio:0) {
		.android {
		  display: none;
		}
		.webkit {
		  display: block !important;
		}
	  }
	</style>
  <!--[if (gte mso 9)|(IE)]>
    <style type="text/css">
     .android {display: none;}
     .webkit {display: none;}
    </style>
  <![endif]-->