CODEWITHSUNDEEP
htmlcssipademailoutlook
Eduardo
Eduardo

Reputation: 8402

Same HTML Email Should Look Different in Outlook and iPad Email

I have developed a workflow application that runs on Windows and on iPads.

Now, I would like to send emails to my users that will allow them to open the application from their email client (Outlook if they run it from their Windows laptops; iPad emails, if they are on the road).

For Windows, the only way I can do this is by attaching a file that my application is registered to open (which will include information I would like to pass to the application).

For iPads, I will include a hyperlink, using a custom URL scheme that my app is registered exclusively for.

The same email could be opened from any of the two devices: is there a way to hide the attachments when viewing from iPads, and the hyperlinks when viewing from Outlook?

I know I can also register the iPad app to open the same kind of file, but I prefer the hyperlink option.

Upvotes: 0

Views: 332

Answers (2)

Eduardo
Eduardo

Reputation: 8402

The following seems to work:

<style>
    .outlook {display:block}
    .iPad {display:none}

    @media screen and (-webkit-min-device-pixel-ratio:0) {
      .outlook {display:none}
      .iPad {display:block}
    }
</style>

Upvotes: 0

Sahil Popli
Sahil Popli

Reputation: 1993

uses CSS @media queries, you can (and should) strategically hide elements to optimize the phone display and desktop email client display

A refrence guide to what & what not to use in emails for all email clients css properties

and use this for checking wheter it is an ipad or an pc

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

use display:none / block to show hide as per your requirements

Upvotes: 1

Related Questions