0

我正在手工编写几个电子邮件模板。它们在 iPhone 4/4S 和台式机上看起来很棒，但由于某种原因，iPhone 5 Retina 上会出现水平滚动。我想避免任何水平滚动。

我查看了许多其他行业领先的公司电子邮件模板的源代码，发现它们没有遇到同样的问题，但实际上并没有采用任何统一的方法。有些使用媒体查询，有些不使用。

我的模板的宽度在 550px - 600px 之间。当谈到视网膜和像素密度时，有什么我不知道的吗？这与表格有什么关系？

更新：http: //jsfiddle.net/AndrewHenderson/DvXa2/

<!doctype html>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Test Template</title>

<style type="text/css">
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) {
  table {
    width: 480px !important;
  }
}
</style>
</head>

<body>

<table width="600" style="font-family:Helvetica, Arial, sans-serif;background-color:#ffffff;color:#111;border-spacing:0;border-collapse:collapse;">
<tr>
  <td>
    <table width="600" style="border-spacing:0;border-collapse:collapse;">
      <tr>
        <td style="background-color:#eeeeee;"></td>
      </tr>
    </table>
    <table width="600" style="border-spacing:0;border-collapse:collapse;">
      <tr>
        <td style="background-color:#eeeeee;"></td>
        <td width="254" style="background-color:#EFEFE4;color:#9A3313;font-size:30px;vertical-align:middle;text-align:right;padding-top:9px;">
          <a href="http://placehold.it/165x31" style="border:0;"><img src="http://placehold.it/165x31" alt="Xxxxx" style="width:160px;min-height:31px;font-size:14pt;color:#9A3313;"></a>
        </td>
        <td width="334" style="background-color:#EFEFE4;color:#9A3313;font-size:28px;vertical-align:middle;padding:5px 0 0 10px;">
          Shopping Request
        </td>
        <td style="background-color:#eeeeee;"></td>
      </tr>
    </table>
    <table width="600" style="border-spacing:0;border-collapse:collapse;">
      <tr>
        <td style="background-color:#eeeeee;"></td>
      </tr>
    </table>
    <table width="600" style="border-spacing:0;border-collapse:collapse;">
      <tr>
        <td style="background-color:#eeeeee;"></td>
        <td width="144" style="vertical-align:top;padding:20px 0 0 15px;">
          <a href="${facebookProfileLink}">
          <img src="http://placehold.it/125" alt="" width="125"></a>
        </td>
        <td width="425" style="padding:20px 0 5px;line-height:22px;">
          <strong>I\'m looking for:</strong> ${product.name} <br>
          <strong>More about me:</strong>

          <ul style="list-style:disc;margin:5px 0 0;padding:15px;line-height:24px;">
            <li><strong>My Profile: </strong><a href="${facebookProfileLink}" style="color:#9A3313">facebook.com/${user.screenName}</a></li>
            <li><strong>Location:</strong> ${distance} miles from your store</li>
            <li><strong>Price Range:</strong> ${priceLevel}</li>
          </ul>

        </td>
        <td width="14"></td>
        <td style="background-color:#eeeeee;"></td>
      </tr>
    </table>
    <table width="600" style="border-spacing:0;border-collapse:collapse;">
      <tr>
        <td style="background-color:#eeeeee;"></td>
        <td width="159"></td>
        <td width="425" style="background:#eeeeee;"></td>
        <td width="14"></td>
        <td style="background-color:#eeeeee;"></td>
      </tr>
    </table>
    <table width="600" style="border-spacing:0;border-collapse:collapse;">
      <tr>
        <td style="background-color:#eeeeee;"></td>
        <td width="159"></td>
        <td width="425" style="padding:8px 0 30px;">
          To make a suggestion to ${user.firstName}, reply to this email with a picture and a short message. iPhone users, respond via the free&nbsp;<a href="#" style="color:#9A3313">Xxxxx app</a>.
        </td>
        <td width="14"></td>
        <td style="background-color:#eeeeee;"></td>
      </tr>
    </table>
    <table width="600" style="border-spacing:0;border-collapse:collapse;">
      <tr>
        <td style="background-color:#eeeeee;"></td>
      </tr>
    </table>
    <table width="600">
      <tr>
        <td style="font-size:85%;color:#555;width:580px;padding:5px 10px 0;">Sent via&nbsp;<a href="#" style="color:#9A3313">Xxxxx</a>, an exclusive service connecting shoppers with the best local stores.<br>
        To stop receiving these requests,&nbsp;<a href="#" style="color:#9A3313">click here</a>. 980 Xxxxx Street #X, San Francisco XXXXX</td>
      </tr>
    </table>
  </td>
</tr>
</table>

</body>
</html>

如果需要，我可以用更多细节更新问题。谢谢！

4

0 回答 0