移动电子邮件的字体大小问题

时间:2017-04-25 16:00:27

标签: css mobile html-email responsive-emails

我正在使用Python / Flask和mandrill smtp在用户分享时发送电子邮件确认。我有一个问题,移动的字体大小超小。

我的解决方案是:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="x-apple-disable-message-reformatting">
    <style type="text/css">
        .bodyContent p {font-size: 18px; line-height: 140%;}
        footer {font-size: 14px; }
        footer img { width: 30px;}
        @media (max-width: 480px) {
            .bodyContent p {font-size:28px !important;}
            .bodyContent .button {font-size: 34px !important; padding: 10px !important;}
            footer {font-size: 22px !important; }
            footer img { width: 50px !important;}
            .headerimg {height: 80px !important;}
            h3 {font-size: 32px !important;}
        }
    </style>
  </head>
</html>

身体是:

<body class="bodyContent" style="border-top: 5px solid #248F8D; color: #444; font-weight: 300; font-family: Helvetica, Arial, Tahoma, sans-serif; background-color: white; margin: 0; padding: 0; width: 100%; box-sizing: border-box; line-height: 140%;">

我不知道为什么会发生这种情况,因为在其他电子邮件中,我将它简单化了,标准字体大小为16px或18px,它适用于网络和移动设备。

以上配置适用于iOS电子邮件,iMail和基于网络的Gmail(我也需要测试应用),但有些事情感觉不对劲。 28px字体大小的Helvetica在手机上似乎过大了不是吗?我认为这是考虑到视网膜显示,但我不确定这将如何适用于其他移动设备。视口和x-apple-disable-message-reformatting似乎没有做任何事情。

如果有帮助,这是电子邮件的RAW标题:

--_av-yV8UIgMjFFR4szq7ryfvsQ
    Content-Type: text/html; charset=utf-8
    Content-Transfer-Encoding: quoted-printable

    <html>
        <head>
            <meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-sc=
    ale=3D1.0" />
            <meta name=3D"x-apple-disable-message-reformatting">
            <style type=3D"text/css">
                .bodyContent p {font-size: 18px; line-height: 140%;}
                footer {font-size: 14px; }
                footer img { width: 30px;}
                @media (max-width: 480px) {
                    .bodyContent p {font-size:28px !important;}
                    .bodyContent .button {font-size: 34px !important; padding: =
    10px !important;}
                    footer {font-size: 22px !important; }
                    footer img { width: 50px !important;}
                    .headerimg {height: 80px !important;}
                    h3 {font-size: 32px !important;}
                }
            </style>
        </head>
    </html>
    <body class=3D"bodyContent" style=3D"border-top: 5px solid #248F8D; color: =
    #444; font-weight: 300; font-family: Helvetica, Arial, Tahoma, sans-serif; =
    background-color: white; margin: 0; padding: 0; width: 100%; box-sizing: bo=
    rder-box; line-height: 140%;">
        <a href=3D"https://mandrillapp.com/track/click/30890999/www.givingdocs.=
    com?p=3DeyJzIjoiRHd1ME9vX3Fnd0V5Y2o5eUdrLWtpUV9ISkhNIiwidiI6MSwicCI6IntcInV=
    cIjozMDg5MDk5OSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXFwvXFxcL3d3dy5naXZpbmdkb2=
    NzLmNvbVxcXC9cIixcImlkXCI6XCJmYTI5MzJjM2VlN2Q0MTRkYTU0OWE5MmE4ZmJmZGFiM1wiL=
    FwidXJsX2lkc1wiOltcIjNkNzRkZWM1NzNjMGI2ZGQ3N2Q1YTk2MjM4MjRkMDU3N2ExZTYwMzlc=
    Il19In0" style=3D"display: block; text-align: center;">
            <img src=3D"https://www.givingdocs.com/static/images/GD-logo-transp=
    arent.png" alt=3D"Giving Docs Estate Planning Platform" class=3D"headerimg"=
     style=3D"height:40px; margin: 15px auto 0;">
        </a>
        <div style=3D"max-width: 600px; margin: 0 auto;">


            <div style=3D"padding: 15px; background-color: white; max-width: 60=
    0px; margin: auto;">
                <p>
                    <span style=3D"background: teal; color: white; padding: 5px=
     10px;">Exclusive Invitation</span>
                </p>
                <p style=3D"margin: 20px 0; font-size: 18px;">
                    John Doe just created a will on Giving Docs and has invited=
     you to the same special offer:  <strong>Create your Will for free</strong>=
     or receive a deep discount on the complete estate package.
                </p>

                <p style=3D"text-align: center;">
                    <a href=3D"https://mandrillapp.com/track/click/30890999/www=
    .givingdocs.com?p=3DeyJzIjoibzBTZ1NCZ0RXUkZ3ZUM1NWlPRlBFM0U4a2xNIiwidiI6MSw=
    icCI6IntcInVcIjozMDg5MDk5OSxcInZcIjoxLFwidXJsXCI6XCJodHRwOlxcXC9cXFwvd3d3Lm=
    dpdmluZ2RvY3MuY29tXFxcL2FjY291bnRcXFwvYWN0aXZhdGVcXFwvTVRBeU9UUS5Cem5YVTUwZ=
    HNiaWx1Y01xSWpORnNEN2s5SDBcIixcImlkXCI6XCJmYTI5MzJjM2VlN2Q0MTRkYTU0OWE5MmE4=
    ZmJmZGFiM1wiLFwidXJsX2lkc1wiOltcIjNmOGM0NDk3MGUyZTc5YzI4MDllMDNlOThiZTJkNTg=
    zYWIwMWVmZjlcIl19In0" class=3D"button" style=3D"display: block; text-align:=
     center; padding: 7px 21px; background-color: teal; color:white; font-weigh=
    t: bold; font-size: 24px; border: 1px solid black; text-decoration: none; b=
    order-radius: 4px;">
                        Get Started
                    </a>
                </p>

                <h3 style=3D"font-weight: 300;">What's Giving Docs?</h3>
                <p>
                    After intense development and testing, Giving Docs has buil=
    t a pain-free way to create and manage your life's purpose through your est=
    ate plan.
                </p>
                <img src=3D"https://www.givingdocs.com/static/images/your-will2=
    .png" style=3D"width: 100%; height: auto; margin: 0 -15px;">
                <p>
                    <a href=3D"https://mandrillapp.com/track/click/30890999/www=
    .givingdocs.com?p=3DeyJzIjoiRHd1ME9vX3Fnd0V5Y2o5eUdrLWtpUV9ISkhNIiwidiI6MSw=
    icCI6IntcInVcIjozMDg5MDk5OSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXFwvXFxcL3d3dy=
    5naXZpbmdkb2NzLmNvbVxcXC9cIixcImlkXCI6XCJmYTI5MzJjM2VlN2Q0MTRkYTU0OWE5MmE4Z=
    mJmZGFiM1wiLFwidXJsX2lkc1wiOltcIjNkNzRkZWM1NzNjMGI2ZGQ3N2Q1YTk2MjM4MjRkMDU3=
    N2ExZTYwMzlcIl19In0" class=3D"button" style=3D"display: block; text-align: =
    center; font-weight: bold; font-size: 22px;  padding: 7px 21px; background-=
    color: white; color: #444; border: 1px solid #666; text-decoration: none; b=
    order-radius: 4px;">
                        Learn more about Giving Docs
                    </a>
                </p>
                <p>
                    Giving Docs normal price is $195 (individual) - $295 (marri=
    ed couple) for the complete package.  With the offer from John Doe,  it's d=
    iscounted to $49 / $79.
                </p>
            </div>
        </div>
        <footer style=3D"padding: 15px; background: #f5f5f5; color: #666;">
                <div style=3D"text-align: center;">
                    <p>
                        Connect with us:
                    </p>
                    <p>
                        <img src=3D"https://www.givingdocs.com/static/images/em=
    ail/twitter.png" style=3D"margin-right: 10px;">
                        <img src=3D"https://www.givingdocs.com/static/images/em=
    ail/facebook.png">
                    </p>
                    <div style=3D"margin: 30px auto 15px; border-bottom: 1px so=
    lid #ccc; height: 1px; width: 600px;"></div>
                    <p>
                        Sent by <a href=3D"https://mandrillapp.com/track/click/=
    30890999/www.givingdocs.com?p=3DeyJzIjoiQ2VZRHZSRFFUOUg1c2c3RmVRSnQycF9KX25=
    JIiwidiI6MSwicCI6IntcInVcIjozMDg5MDk5OSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXF=
    wvXFxcL3d3dy5naXZpbmdkb2NzLmNvbVwiLFwiaWRcIjpcImZhMjkzMmMzZWU3ZDQxNGRhNTQ5Y=
    TkyYThmYmZkYWIzXCIsXCJ1cmxfaWRzXCI6W1wiM2Q3NGRlYzU3M2MwYjZkZDc3ZDVhOTYyMzgy=
    NGQwNTc3YTFlNjAzOVwiXX0ifQ" style=3D"color: #444;">Giving Docs</a> =C2=B7 7=
    01 Brazos St, Austin, TX 78701
                    </p>
                </div>
        </footer>

    <img src=3D"https://mandrillapp.com/track/open.php?u=3D30890999&id=3Dfa2932=
    c3ee7d414da549a92a8fbfdab3" height=3D"1" width=3D"1"></body>

--_av-yV8UIgMjFFR4szq7ryfvsQ--

感谢您对此提供任何帮助!

0 个答案:

没有答案