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