Html 电子邮件响应：媒体查询故障排除（特定iPhone目标问题）

我正在努力提高我们电子邮件的响应能力，但在区分iPhone4、5、6、6+与Android 2.3或iPhone3的风格方面似乎遇到了一些问题。具体来说，我希望特定的宽度要求是基于什么类型的手机，你打开电子邮件的宽度越小，旧手机越大，新手机越大

我遇到的具体问题是，所有设备似乎都在使用底部媒体查询，该查询只针对Android 2.3/iPhone3/其他较旧的手机。似乎这可能是某种继承问题，但我似乎不知道到底发生了什么

以下是我正在使用的不同媒体查询目标规则，以及它们在我的代码中的顺序：

适用于IPHONE 6+

适用于IPHONE 6

用于片剂

适用于IPHONE 5

适用于IPHONE 4/S

适用于安卓2.3、iPhone3和其他任何产品

不幸的是，似乎所有设备都在使用传递到底部查询的样式。任何帮助都将不胜感激

@media only screen and (max-width: 480px) {...}

最后一条规则将适用于最大宽度为480px的所有屏幕，因此它将覆盖上述两条适用于IPHONE 4/S和IPHONE 5的规则，这两条规则的目标屏幕大小相同

尝试在媒体查询中使用not操作符，以获得更具体的目标。 这里的示例：

尝试向这些媒体查询添加最小宽度。前-

@media only screen and (min-width: 481px) and (max-width: 640px) {
     body{font-size:14px;}
}

---

/*iPhone 2G-4S在纵向和横向/@ 仅媒体屏幕 最小值-设备-宽度：320像素 andmax-设备-宽度：480像素 webkit-device-pixel-ratio:2和device-aspect-ratio:2/3{/STYLES GO HERE*/}

/* iPhone 5 & 5S in portrait & landscape */
@
media only screen
and(min - device - width: 320 px)
and(max - device - width: 568 px)
and(-webkit - device - pixel - ratio: 2) and(device - aspect - ratio: 40 / 71) { /* STYLES GO HERE */ }

/* iPhone 6 in portrait & landscape */
@
media only screen
and(min - device - width: 375 px)
and(max - device - width: 667 px)
and(-webkit - device - pixel - ratio: 2) and(device - aspect - ratio: 667 / 375) { /* STYLES GO HERE */ }


/* iPhone 6 plus in portrait & landscape */
@
media only screen
and(min - device - width: 414 px)
and(max - device - width: 736 px)
and(-webkit - device - pixel - ratio: 3) and(device - aspect - ratio: 16 / 9) { /* STYLES GO HERE */ }  

---

您是否已通过验证程序来确保所有代码都已正确关闭？您应该注意到，大多数电子邮件客户端使用的是非常过时和/或基本的呈现器，这些呈现器忽略或无法解析许多CSS规则，而我们今天在web上看到这些规则很常见。你试过把安卓2.3、iPhone3等的规则移动一下吗？是的，我试过通过验证器——一切都好closed@terry是的，我知道，但我非常确定我使用的所有东西都应该得到支持

@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) {...}

@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) {...}

@media only screen and (max-width: 480px) {...}

@media only screen and (max-width: 480px) {...}

@media only screen and (min-width: 481px) and (max-width: 640px) {
     body{font-size:14px;}
}

/* iPhone 5 & 5S in portrait & landscape */
@
media only screen
and(min - device - width: 320 px)
and(max - device - width: 568 px)
and(-webkit - device - pixel - ratio: 2) and(device - aspect - ratio: 40 / 71) { /* STYLES GO HERE */ }

/* iPhone 6 in portrait & landscape */
@
media only screen
and(min - device - width: 375 px)
and(max - device - width: 667 px)
and(-webkit - device - pixel - ratio: 2) and(device - aspect - ratio: 667 / 375) { /* STYLES GO HERE */ }


/* iPhone 6 plus in portrait & landscape */
@
media only screen
and(min - device - width: 414 px)
and(max - device - width: 736 px)
and(-webkit - device - pixel - ratio: 3) and(device - aspect - ratio: 16 / 9) { /* STYLES GO HERE */ }