html - 电子邮件响应 : Media Queries Trouble Shooting (specific iPhone targeting issue)

Question

我正在努力提高电子邮件的响应能力，但似乎遇到了一些问题，无法将 iPhone 4、5、6、6+ 的样式与 Android 2.3 或 iPhone 3 等样式区分开来。具体来说，我想要某些宽度要求取决于您打开电子邮件的手机类型(旧手机的宽度较小，新手机的宽度较大)。

我遇到的具体问题是所有设备都在使用底部媒体查询，即专为 Android 2.3/iPhone3/其他旧手机设计的媒体查询。似乎这可能是某种继承问题，但我似乎无法弄清楚到底发生了什么。

以下是我正在使用的不同媒体查询定位规则以及它们在我的代码中的顺序:

适用于 IPHONE 6+

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

适用于 IPHONE 6

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

专为平板电脑设计

@media only screen and (max-width: 640px) and (-webkit-min-device-pixel-ratio: 1) {...}

适用于 IPHONE 5

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

适用于 IPHONE 4/S

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

适用于 ANDROID 2.3、IPHONE 3 和任何其他设备

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

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

Answer 1

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

这最后一条规则将适用于最大宽度为 480px 的所有屏幕，因此它将覆盖上述针对相同屏幕尺寸的 INTENDED FOR IPHONE 4/S 和 INTENDED FOR IPHONE 5 的 2 条规则。

尝试在您的媒体查询中使用“not”运算符以获得更具体的定位。这里的例子:http://www.vanseodesign.com/css/media-queries/