我正在使用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--
感谢您对此提供任何帮助!