Media Queries for Email

How to target IOS, Outlook or Android as Generic.

by Wally Glenn

HTML

<h3>If you view this with with one of the devices using a @media query, you will only see the results for that device.</h3>

<p class="desktop" style="display: none;">You're using a desktop device.</p>
<p class="mobile" style="display: none;">You're using a mobile device.</p>
<p class="ios" style="display: none;">You're using an Apple/IOS/Webkit device.</p>
<p class="outlook" style="display: none;">You're using Outlook.</p>
<p class="outlookcom" style="display: none;">You're using Outlook.com</p>

CSS

<style>
  .outlook, .ios, .mobile, {
	display: none !important;
}
  .desktop {
	display: block !important;
}
[class="x_outlookcom"] {
  display: block;
}
[class="x_desktop"] {
  display: none;
}

@media only screen and (max-width: 414px) {
  .mobile {
    display: block !important;
  }
  .outlook, .ios, .desktop, {
	display: none !important;
}



@media screen and (-webkit-min-device-pixel-ratio:0) {
  .ios {
    display: block !important;
  }
  .outlook, .desktop, .mobile, .ipad {
	display: none !important;
  }
  .desktop {
	display: none !important;
  }
}
/*@-moz-document url-prefix() {*/
  /* Insert styles here */
/*}*/
</style>



<!--[if mso]>
<style type="text/css">
.outlook {
	display: block !important;
	 font-size; 16px;
}
.ios, .mobile {
	display: none !important;
}
  .desktop {
	display: none !important;
}
</style>
<![endif]-->