HTML电子邮件看在Gmail应用程序不同看在、应用程序、电子邮件、不同

2023-09-13 02:16:23 作者:洛莜、残雪

我并不是真的用来制作HTML电子邮件。当然,我要开始了做一个回应之一,基本上两个版本相同的电子邮件。当我以为我拥有了大多数客户做我实现了这两个机器人的Gmail应用程序和iOS了电子邮件中的第三次看。我已阅读Gmail带了头部分,但即使我尝试的风格它内联Gmail应用仍使第三次看。下面链接的评论图像显示移动应该如何看和Gmail应用程序的外观。麻烦的是,我具有应变成一个运动图像的左侧和首标和文本到右侧(如移动图像)三列。 Gmail应用程序显示图像,标题和文字上的每一行。它应该 - 充其量 - 看起来像移动或至少看起来像桌面版

任何帮助是AP preciated。

感谢

code:

 <!DOCTYPE HTML PUBLIC -  // W3C // DTD HTML 4.01过渡// ENhttp://www.w3.org/TR/html4/loose。 DTD>
< HTML>
    < HEAD>
        < META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= UTF-8>
        <冠军>< /标题>
        <风格类型=文本/ CSS>


            .ReadMsgBody {宽度:100%;背景色:#FFFFFF;}
            .ExternalClass {宽度:100%;背景色:#FFFFFF;}
            身体{宽度:100%;背景色:#FFFFFF;保证金:0;填充:0; -webkit-字体平滑:抗锯齿;字体家庭:格鲁吉亚,时代,衬线}
            表{边界崩溃:崩溃;}
            表TD {边界崩溃:崩溃; }
            H2,P {保证金:0;}
            H2 {填充顶:15px的;}
            .IMG,的.text {显示:块;}
            身体.deviceWidth {宽度:680px}
            @media只有屏幕,(最大宽度:640px){
                身体.deviceWidth {宽度:440px重要的;填充:0;}
                身体.center {文本对齐:中心重要;}
                table.triplet {宽度:99%重要;!填充底:20像素重要;}
                .noPadding {填充左:0重要;}
                .IMG,的.text {宽度:50%;}
                的.text p {填充右:20像素;}
                H2 {填充顶:0重要;}
            }

            @media只有屏幕,(最大宽度:479px){
                身体.deviceWidth {宽度:300像素很重要;填充:0;}
                身体.center {文本对齐:中心重要;}
                .IMG IMG {宽度:140px;}
            }
        < /风格>
        <! - 针对Windows Mobile的 - >
        &所述;! -  [如果IEMobile 7]≥
        <风格类型=文本/ CSS>

        < /风格>
        百分比抑制率ENDIF]  -  GT!;
    < /头>
    <身体BGCOLOR =#FFFFFF的风格=字体家庭:格鲁吉亚,时报衬线>

        <表格的宽度=100%的边界=0CELLSPACING =0的cellpadding =0>
            &其中; TR>
                < TD WIDTH =100%VALIGN =顶BGCOLOR =#FFFFFF的风格=填充顶:20像素;>
                    <表类=集装箱deviceWidthWIDTH =700ALIGN =中心的边界=0的cellpadding =0CELLSPACING =0BGCOLOR =#FFFFFF>

                        &其中; TR>
                            < TD风格=填充:0 10px的50像素; BGCOLOR =#FFFFFFALIGN =中心类=deviceWidth>
                                < IMG SRC =htt​​p://placehold.it/680x300级=deviceWidth边界=0ALT =>
                                < H1 align =left>标题1< / H1>
                                < p align =left> Lorem存有悲坐阿梅德,consectetur adipisicing ELIT,sed的根本eiusmod tempor incididunt UT labore等dolore麦格纳aliqua。 UT enim广告微量veniam,QUIS nostrud实习ullamco laboris妮斯UT aliquip前EA commodo consequat。 DUIS奥特irure悲的再prehenderit在voluptate velit ESSE cillum dolore欧盟fugiat法无pariatur。 Excepteur SINT occaecat cupidatat非proident,必须遵守的过失魁正式开通了deserunt mollit阿尼姆ID EST laborum< / P>
                            < / TD>
                        < / TR>

                        &其中; TR>
                            < TD类=deviceWidth的风格=填充:0;宽度=700>
                                <表类=三重WIDTH =33%align =left的风格=背景:#FFFFFF;边框:1px的固体#FFFFFF;边界=0的cellpadding =0CELLSPACING =0>
                                    &其中; TR>
                                        < TD风格=填充:0;填充左:10px的;填充底:20像素级=noPadding>< p风格=MSO的表lspace:0; MSO的表rspace:0 ;>&所述; / P>
                                            <! -  [如果IE] GT;
                                              <表格的宽度=100%对齐=中心的cellpadding =0CELLSPACING =0的边界=0>
                                                &其中; TR>
                                                  < TD>
                                            百分比抑制率ENDIF]  -  GT!;
                                            <表align =left级=IMG的边界=0的cellpadding =0CELLSPACING =0>
                                                &其中; TR>
                                                    < TD>< P类=MSO的表lspace:0; MSO的表rspace:0;>< IMG SRC =htt​​p://placehold.it/210x210边界=0中高音=>&所述; / P>&所述; / TD>
                                                < / TR>
                                            < /表>
                                            <! -  [如果IE] GT;
                                                < / TD>
                                                < / TR>
                                                &其中; TR>
                                                < TD>
                                            百分比抑制率ENDIF]  -  GT!;
                                            <表align =left级=文本的边界=0的cellpadding =0CELLSPACING =0>
                                                &其中; TR>
                                                    < TD>
                                                        < H2>提供1< / H>
                                                        < P类=填充底:20像素;> Lorem存有悲坐阿梅德,consectetur adipisicing ELIT,sed的做eiusmod tempor incididunt UT labore等dolore麦格纳aliqua。 。UT enim广告微量veniam,QUIS nostrud实习ullamco laboris妮斯UT aliquip前EA commodo consequat< / P>
                                                    < / TD>
                                                < / TR>
                                            < /表>
                                            <! -  [如果IE] GT;
                                                < / TD>
                                                < / TR>
                                                < /表>
                                            百分比抑制率ENDIF]  -  GT!;
                                        < / TD>
                                    < / TR>
                                < /表>
                                <表类=三重WIDTH =33%align =left的风格=背景:#FFFFFF;边框:1px的固体#FFFFFF;边境=0的边界=0的cellpadding =0CELLSPACING =0>
                                    &其中; TR>
                                        < TD风格=填充:0;填充左:10px的;填充底:20像素级=noPadding>< p风格=MSO的表lspace:0; MSO的表rspace:0 ;>&所述; / P>
                                            <! -  [如果IE] GT;
                                              <表格的宽度=100%对齐=中心的cellpadding =0CELLSPACING =0的边界=0>
                                                &其中; TR>
                                                  < TD>
                                            百分比抑制率ENDIF]  -  GT!;
                                            <表align =left级=IMG的边界=0的cellpadding =0CELLSPACING =0>
                                                &其中; TR>
                                                    < TD>< P类=MSO的表lspace:0; MSO的表rspace:0;>< IMG SRC =htt​​p://placehold.it/210x300边界=0中高音=>&所述; / P>&所述; / TD>
                                                < / TR>
                                            < /表>
                                            <! -  [如果IE] GT;
                                                < / TD>
                                                < / TR>
                                                &其中; TR>
                                                < TD>
                                            百分比抑制率ENDIF]  -  GT!;
                                            <表align =left级=文本的边界=0的cellpadding =0CELLSPACING =0>
                                                &其中; TR>
                                                    < TD>
                                                        < H2>提供2'; / H>
                                                        < P类=填充底:20像素;> Lorem存有悲坐阿梅德,consectetur adipisicing ELIT,sed的做eiusmod tempor incididunt UT labore等dolore麦格纳aliqua。 。UT enim广告微量veniam,QUIS nostrud实习ullamco laboris妮斯UT aliquip前EA commodo consequat< / P>
                                                    < / TD>
                                                < / TR>
                                            < /表>
                                            <! -  [如果IE] GT;
                                                < / TD>
                                                < / TR>
                                                < /表>
                                            百分比抑制率ENDIF]  -  GT!;

                                        < / TD>
                                    < / TR>
                                < /表>
                                <表类=三重WIDTH =33%align =left的风格=背景:#FFFFFF;边框:1px的固体#FFFFFF;边境=0的边界=0的cellpadding =0CELLSPACING =0>
                                    &其中; TR>
                                        < TD风格=填充:0;填充左:10px的;填充底:20像素;类=noPadding>< P类=MSO的表lspace:0; MSO的表rspace:0;>< / P>
                                            <! -  [如果IE] GT;
                                              <表格的宽度=100%对齐=中心的cellpadding =0CELLSPACING =0的边界=0>
                                                &其中; TR>
                                                  < TD>
                                            百分比抑制率ENDIF]  -  GT!;
                                            <表align =left级=IMG的边界=0的cellpadding =0CELLSPACING =0>
                                                &其中; TR>
                                                    < TD>< P类=MSO的表lspace:0; MSO的表rspace:0;>< IMG SRC =htt​​p://placehold.it/210x100边界=0中高音=>&所述; / P>&所述; / TD>
                                                < / TR>
                                            < /表>
                                            <! -  [如果IE] GT;
                                                < / TD>
                                                < / TR>
                                                &其中; TR>
                                                < TD>
                                            百分比抑制率ENDIF]  -  GT!;
                                            <表align =left级=文本的边界=0的cellpadding =0CELLSPACING =0>
                                                &其中; TR>
                                                    < TD>
                                                        < H2>提供3'; / H>
                                                        < P类=填充底:20像素;> Lorem存有悲坐阿梅德,consectetur adipisicing ELIT,sed的做eiusmod tempor incididunt UT labore等dolore麦格纳aliqua。 。UT enim广告微量veniam,QUIS nostrud实习ullamco laboris妮斯UT aliquip前EA commodo consequat< / P>
                                                    < / TD>
                                                < / TR>
                                            < /表>
                                            <! -  [如果IE] GT;
                                                < / TD>
                                                < / TR>
                                                < /表>
                                            百分比抑制率ENDIF]  -  GT!;
                                        < / TD>
                                    < / TR>
                                < /表>
                            < / TD>
                        < / TR>


                    < /表>
                < / TD>
            < / TR>
        < /表>
    < /身体GT;
< / HTML>
 

解决方案

在使用 align =left在桌子上,它就像漂浮留在CSS。这是Gmail的在做,它是浮动的文本表,使其溢出(弹出下)图像见下表。

如何从 Gmail 下载电子邮件

如果你想在表内的文本对齐,把它放在< TD> 这些表中,而不是

更新:

有关响应HTML电子邮件,请尝试使用显示:块; 切换技术:

 <!DOCTYPE HTML PUBLIC -  // W3C // DTD HTML 4.01 // ENhttp://www.w3.org/TR/html4/strict.dtd >
< HTML>< HEAD>< META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= UTF-8><冠军>< /标题>
  <风格类型=文本/ CSS>
    @media只有屏幕,(最大宽度:600px的){.switch {宽度:100%;显示:块; }}
  < /风格>
< /头>
<身体GT;

  <表格的宽度=100%的边界=0的cellpadding =0CELLSPACING =0>
    &其中; TR>
      &所述; TD类=开关宽度=50%>
         < IMG的alt =SRC =htt​​p://placehold.it/150x150WIDTH =100%的风格=保证金:0;边界:0;填充:0;显示:块;>
      < / TD>
      < TD类=开关WIDTH =50%VALIGN =顶的风格=填充:30像素;>
        文字在这里...
      < / TD>
    < / TR>
  < /表>

< /身体GT;< / HTML>
 

这将通过Gmail的,因为它剔除了风格的标签,保留默认无响应的布局忽略。

I'm not really used to making html emails. Of course I have to start out making a responsive one in basically two versions of the same email. When I thought I had it done for most clients I realised that gmail app for both android and iOS gave the email a third look. I have read the gmail strips out the header section but even if I try to style it inline gmail app still makes the third look. Links to images in comment below shows how mobile should look and gmail app look. The trouble is where I have three columns that should turn into one moving the image to the left and header and text to the right (like mobile image). Gmail app shows the image, header and text on each their line. It should - at best - look like the mobile or at least look like the desktop version.

Any help is appreciated.

Thanks

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
        <style type="text/css">


            .ReadMsgBody {width: 100%; background-color: #ffffff;}
            .ExternalClass {width: 100%; background-color: #ffffff;}
            body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased; font-family: Georgia, Times, serif}
            table {border-collapse: collapse;}
            table td { border-collapse: collapse; } 
            h2, p {margin: 0;}
            h2 {padding-top: 15px;}
            .img, .text {display: block;}
            body .deviceWidth {width: 680px}
            @media only screen and (max-width: 640px)  {
                body .deviceWidth {width: 440px!important; padding:0;}  
                body .center {text-align: center!important;}
                table.triplet {width: 99% !important; padding-bottom: 20px !important;}
                .noPadding {padding-left: 0!important;}
                .img, .text {width: 50%;}
                .text p {padding-right: 20px;}
                h2 {padding-top: 0!important;}
            }

            @media only screen and (max-width: 479px) {
                body .deviceWidth {width: 300px!important; padding:0;}  
                body .center {text-align: center!important;}
                .img img {width: 140px;}
            }
        </style>
        <!-- Targeting Windows Mobile -->
        <!--[if IEMobile 7]>
        <style type="text/css">

        </style>
        <![endif]-->
    </head> 
    <body bgcolor="#ffffff" style="font-family: Georgia, Times, serif">

        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="100%" valign="top" bgcolor="#ffffff" style="padding-top: 20px;">
                    <table class="container deviceWidth" width="700" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">

                        <tr>
                            <td style="padding: 0 10px 50px;" bgcolor="#ffffff" align="center" class="deviceWidth">
                                <img src="http://placehold.it/680x300" class="deviceWidth" border="0" alt="">
                                <h1 align="left">Header 1</h1>
                                <p align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            </td>
                        </tr>

                        <tr>
                            <td class="deviceWidth" style="padding: 0;" width="700">
                                <table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
                                            <!--[if IE]>
                                              <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                                                <tr>
                                                  <td>
                                            <![endif]-->
                                            <table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x210" border="0" alt=""></p></td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                <tr>
                                                <td>
                                            <![endif]-->
                                            <table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td>
                                                        <h2>Offer 1</h2>
                                                        <p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                </table>
                                            <![endif]-->
                                        </td>
                                    </tr>
                                </table>
                                <table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
                                            <!--[if IE]>
                                              <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                                                <tr>
                                                  <td>
                                            <![endif]-->
                                            <table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x300" border="0" alt=""></p></td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                <tr>
                                                <td>
                                            <![endif]-->
                                            <table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td>
                                                        <h2>Offer 2</h2>
                                                        <p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                </table>
                                            <![endif]-->

                                        </td>
                                    </tr>
                                </table>
                                <table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="padding: 0; padding-left: 10px; padding-bottom: 20px;" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
                                            <!--[if IE]>
                                              <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                                                <tr>
                                                  <td>
                                            <![endif]-->
                                            <table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x100" border="0" alt=""></p></td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                <tr>
                                                <td>
                                            <![endif]-->
                                            <table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td>
                                                        <h2>Offer 3</h2>
                                                        <p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                </table>
                                            <![endif]-->
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>


                    </table>
                </td>
            </tr>
        </table>
    </body> 
</html>

解决方案

When you use align="left" on the tables, it is like floating left in CSS. This is what Gmail is doing, it is floating your text table, causing it to overflow (pop down) below your image table.

If you want your text within the tables to align, put it in the <td> within those tables instead.

Update:

For responsive in html email, try using the display:block; toggle technique:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    @media only screen and (max-width: 600px) { .switch { width:100%; display:block; } }
  </style>
</head>
<body>

  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="switch" width="50%">
         <img alt="" src="http://placehold.it/150x150" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
      </td>
      <td class="switch" width="50%" valign="top" style="padding:30px;">
        Text here...
      </td>
    </tr>
  </table>

</body></html>

This will be ignored by Gmail as it strips the style tag, leaving the default non-responsive layout.

 
精彩推荐
图片推荐