全角电子邮件模板?

Full-Width E-mail Template?

提问人:hakogg 提问时间:1/11/2023 最后编辑:Paulw11hakogg 更新时间:1/11/2023 访问量:51

问:

我最近收到一封电子邮件,在IOS G-Mail应用程序上显示为全角:

https://ibb.co/FBd03XH

尝试重新创建时,它始终如下所示:

https://ibb.co/kMY0FLm

编辑:添加代码

<div role="article" style="background-color:#000">
    <table role="presentation" style="width:100%;border:none;border-spacing:0">
      <tr>
        <td align="center" style="padding:0">
  <table role="presentation" style="width:94%;max-width:600px;border:none;border-spacing:0;text-align:left;font-family:system-ui;font-size:16px;line-height:22px;color:#fff">
            <tr>
            </tr>
            <tr>
              <td>
                <h1 style="margin-top:0;margin-bottom:16px;font-size:26px;line-height:32px;font-weight:bold;letter-spacing:-0.02em">Welcome to our responsive email!</h1>
                <p style="margin:0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, <a href="http://www.example.com/" style="color:#e50d70;text-decoration:underline">eget accumsan dictum</a>, nisi libero ultricies ipsum, in posuere mauris neque at erat.</p>
              </td>
            </tr>
            <tr>
              <td style="padding:0;font-size:24px;line-height:28px;font-weight:bold">
                <a href="http://www.example.com/" style="text-decoration:none"><img src="https://assets.codepen.io/210284/1200x800-2.png" width="600" alt="" style="width:100%;height:auto;border:none;text-decoration:none;color:#363636"></a>
              </td>
            </tr>
            <tr>
              <td style="padding:35px 30px 11px 30px;font-size:0;background-color:#ffffff;border-bottom:1px solid #f0f0f5">
  
  
                <div class="col-sml" style="width:100%;max-width:145px;vertical-align:top;text-align:left;font-family:system-ui;font-size:14px;color:#363636">
                  <img src="https://assets.codepen.io/210284/icon.png" width="115" alt="" style="width:115px;max-width:80%;margin-bottom:20px">
                </div>


                <div class="col-lge" style="width:100%;max-width:395px;vertical-align:top;padding-bottom:20px;font-family:system-ui;font-size:16px;line-height:22px;color:#363636">
                  <p style="margin-top:0;margin-bottom:12px">Nullam mollis sapien vel cursus fermentum. Integer porttitor augue id ligula facilisis pharetra. In eu ex et elit ultricies ornare nec ac ex. Mauris sapien massa, placerat non venenatis et, tincidunt eget leo.</p>
                  <p style="margin-top:0;margin-bottom:18px">Nam non ante risus. Vestibulum vitae eleifend nisl, quis vehicula justo. Integer viverra efficitur pharetra. Nullam eget erat nibh.</p>
                  <p style="margin:0"><a href="https://example.com/" style="background: #ff3884;text-decoration: none;padding: 10px 25px;color: #ffffff;border-radius: 4px"><span style="font-weight:bold">Claim yours now</span></a></p>
                </div>
   
   
              </td>
            </tr>
            <tr>
              <td style="padding:30px;font-size:24px;line-height:28px;font-weight:bold;background-color:#ffffff;border-bottom:1px solid #f0f0f5">
                <a href="http://www.example.com/" style="text-decoration:none"><img src="https://assets.codepen.io/210284/1200x800-1.png" width="540" alt="" style="width:100%;height:auto;border:none;text-decoration:none;color:#363636"></a>
              </td>
            </tr>
            <tr>
              <td style="padding:30px;background-color:#ffffff">
                <p style="margin:0">Duis sit amet accumsan nibh, varius tincidunt lectus. Quisque commodo, nulla ac feugiat cursus, arcu orci condimentum tellus, vel placerat libero sapien et libero. Suspendisse auctor vel orci nec finibus.</p>
              </td>
            </tr>
            <tr>
              <td style="padding:30px;text-align:center;font-size:12px;background-color:#404040;color:#cccccc">
                <p style="margin:0 0 8px 0"><a href="http://www.facebook.com/" style="text-decoration:none"><img src="https://assets.codepen.io/210284/facebook_1.png" width="40" height="40" alt="f" style="color:#cccccc"></a> <a href="http://www.twitter.com/" style="text-decoration:none"><img src="https://assets.codepen.io/210284/twitter_1.png" width="40" height="40" alt="t" style="color:#cccccc"></a></p>
                <p style="margin:0;font-size:14px;line-height:20px">&reg; Someone, Somewhere 2021<br><a class="unsub" href="http://www.example.com/" style="color:#cccccc;text-decoration:underline">Unsubscribe instantly</a></p>
              </td>
            </tr>
          </table>


        </td>
      </tr>
    </table>
  </div>
Android HTML CSS iOS 电子邮件

评论

0赞 Bernard Borg 1/11/2023
发布您的代码,否则我们无法为您提供帮助
0赞 hakogg 1/11/2023
@BernardBorg 对不起
0赞 Libra 1/11/2023
不要发布外部链接,他们可能会死,然后这个问题对后代来说毫无价值
1赞 Bernard Borg 1/11/2023
你的桌子上有宽度:94%。删除它后会发生什么?
0赞 HTeuMeuLeu 1/11/2023
Gmail 有专门的启发式方法,可以使电子邮件是否全宽。您可以在此处查看包含不同解决方案的线程:github.com/hteumeuleu/email-bugs/issues/57

答: 暂无答案