相同的 HTML 电子邮件在 Outlook 和 iPad 电子邮件中应该看起来不同答案

【问题标题】：Same HTML Email Should Look Different in Outlook and iPad Email相同的 HTML 电子邮件在 Outlook 和 iPad 电子邮件中应该看起来不同
【发布时间】：2013-03-01 20:15:04
【问题描述】：

我开发了一个在 Windows 和 iPad 上运行的工作流应用程序。

现在，我想向我的用户发送电子邮件，允许他们从他们的电子邮件客户端打开应用程序（如果他们从 Windows 笔记本电脑运行 Outlook；如果他们在路上运行，则使用 iPad 电子邮件）。

对于 Windows，我能做到这一点的唯一方法是附加一个我的应用程序注册打开的文件（其中将包含我想传递给应用程序的信息）。

对于 iPad，我将包含一个超链接，使用我的应用专门注册的自定义 URL 方案。

可以从两种设备中的任何一种打开相同的电子邮件：有没有办法在 iPad 上查看时隐藏附件，在 Outlook 中查看时隐藏超链接？

我知道我也可以注册 iPad 应用来打开相同类型的文件，但我更喜欢超链接选项。

【问题讨论】：

标签： html css ipad email outlook

【解决方案1】：

使用 CSS @media 查询，您可以（并且应该）战略性地隐藏元素以优化手机显示和桌面电子邮件客户端显示

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

并用它来检查它是ipad还是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 */
}

使用 display:none / block 根据您的要求显示隐藏

【讨论】：

我不认为我可以根据屏幕分辨率来做到这一点。 iPad 的分辨率比大多数笔记本电脑的屏幕都要高，但这可能会改变。有没有办法按操作系统或设备品牌进行过滤？
我不认为 css 允许我们这样做并且不确定 jquery
我无法使用 jquery：这是用于电子邮件
嗯，抱歉不在我的知识范围内

【解决方案2】：

以下似乎有效：

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

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

【讨论】：