html - iPad 2 不尊重电子邮件的媒体查询

Question

所以我最近遇到了一个与 iPad 2 的邮件有关的问题。

我有这个媒体查询：

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

（我使用 727 只是为了在屏幕宽度小于电子邮件标头时开始缩小内容。

问题是，对于 iPad 2（我也假设为 1，但我没有要测试的），它不会开始尊重媒体查询，除非我一直下降到 701px 的最大宽度.

它似乎可以在 iPad3 上运行（至少根据试金石，因为我也没有可以测试的物理设备）。

有人遇到过这种情况么？我假设 iPad 的最大宽度为 768 像素。

编辑：对不起，我最初并不清楚这一点，但对于 iPad2，它实际上是在使用这个媒体查询（我没想到，因为设备宽度应该是 768px），但对于 iPad3，它实际上并没有解释它。

score 0 · Accepted Answer

我在 iPad Mini 上的电子邮件模板也遇到了同样的问题。这是我最初的@media 查询：

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

但正如您所指出的（顺便说一句，谢谢！）iPad 正在接受这些。我只在 iPad mini 上进行了测试，但我能够通过添加max-device-width如下声明来“欺骗”iPad 忽略它们：

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

注意：使问题更加复杂的是 Litmus 显示 iPad Mini 忽略了仅限移动设备的 CSS，但是当我在实际设备上对其进行测试时，它发现了它们。

1 回答 1