iphone - 用 iPhone 覆盖@media CSS

Question

我遇到的问题是在 Android(三星 Galaxy 4.0)上，此 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 宽度缩小到 300px，对其显示产生不利影响

Answer 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 是一个假设的容器。