用 iPhone 覆盖 @media CSS答案

【问题标题】：Overriding @media CSS with the iPhone用 iPhone 覆盖 @media CSS
【发布时间】：2012-09-26 18:23:05
【问题描述】：

我遇到的问题是在 Android（4.0 与三星 Galaxy）上的这封 HTML 电子邮件中的文本被截断。

我已经使用@media 查询来解决这个问题，但它们会对 iPhone 产生不利影响，将宽度缩小太多。我试图取消 width: 300px !important; 只是为了 iPhone 没有运气。

提前感谢您的任何建议。

当前@Media：

@media only screen and (-webkit-device-pixel-ratio: .75) {
  /* CSS for Low-density screens goes here *
   * Ex: HTC Evo, HTC Incredible, Nexus One */
   /* Styles */
      table[class="table"], td[class="cell"] {

width: 300px !important;
}
}

@media only screen and (-webkit-device-pixel-ratio: 1) and (max-device-width: 768px) {
  /* CSS for Medium-density screens goes here *
   * Ex: Samsung Ace, Kindle Fire, Macbook Pro *
   * max-device-width added so you don't target laptops and desktops */
   /* Styles */
      table[class="table"], td[class="cell"] {
width: 300px !important;

}
}


/* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
      table[class="table"], td[class="cell"] {
          width:auto !important;
}

}

如果没有媒体查询，Android 文本会被截断：

媒体查询还会在 iPhone 上将 td/table 的宽度缩小到 300 像素，从而对其显示产生不利影响

【问题讨论】：

标签： iphone html css html-email

【解决方案1】：

确保您要应用的 CSS 定义更具体；

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    .container table[class="table"], .table td[class="cell"] {
        width: auto !important;
    }
}

.container 是一个假设的容器。

【讨论】：

我不认为这是特异性问题，因为我试过了，然后发生的事情是问题被翻转了——iPhone 已修复，但 Android 文本再次被截断。
@jsuissa 我的意思是更具体地在你的 iPhone 专用 @media。见编辑。
知道了。所以我试过了，它做了我描述的。我认为这意味着问题是 iPhone 媒体查询也影响了 Android 设备？
@jsuissa 不准确。问题是这两个规则同样具体（它们都有!important 和相同的选择器），所以浏览器不知道它应该覆盖。更具体的规则迫使它覆盖不太具体的规则。如果这对您有用，请不要忘记接受此答案！
不走运。即使改变特异性也不起作用。我认为问题在于我的“iPhone”特定媒体查询也影响了 Android，而不仅仅是 iPhone。

【解决方案2】：

作为“-webkit-min-device-pixel-ratio: 1.5”的替代品，我怀疑你想要“-webkit-max-device-pixel-ratio: 1”。我不知道浏览器会如何处理既不是“min-”也不是“max-”的媒体查询（例如“-webkit-device-pixel-ratio: 1”）；我怀疑某些浏览器会将媒体查询解释为相等，但许多浏览器只会吐槽并总是说查询是错误的。

您的浏览器是否可能会将有关其无法理解的媒体查询的错误消息放入“错误控制台”？

有时会出现手持设备报告密度为 1 但宽度非常大（例如 800）（“视口”宽度）的情况。您当前的代码似乎将 no CSS 发送到此类设备，我怀疑这是您想要的。在 CSS 的某些部分而不是其他部分上具有特定的媒体查询（例如 max-device-width:) 通常暗示某些边缘情况没有被考虑。

【讨论】：

【解决方案3】：

尝试使用max-width 和min-width 来满足android 和iphone。它对我有用。

【讨论】：