0

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

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

在此先感谢您的任何建议。

当前@媒体：

@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 文本会被截断：

没有媒体查询 Android 文本被截断

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

使用媒体查询 iPhone 将 td/table 的宽度缩小到 300px

4

3 回答 3

0

确保您要应用的 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假设的容器在哪里。

于 2012-09-26T18:28:07.570 回答
0

尝试使用max-widthandmin-width来满足 androids 和 iphones 的需求。它对我有用。

于 2012-09-28T16:29:59.633 回答
0

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

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

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

于 2012-09-27T04:19:42.403 回答