响应 HTML 电子邮件签名
Responsive HTML E-mail Signature
我正在尝试制作 HTML 响应式电子邮件签名。在所有浏览器(Chrome、Safari、Firefox 等)中它工作正常。但是当我发送它时,我的 Apple Mail(OSX 和 iOS)不会让它响应(不缩放):(,他们确实支持它。
这是我的代码,有人可以帮忙吗?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive HTML Email Signature</title>
<style type="text/css">
/*Global Styles*/
body { background: #eeeeee; margin: 0; padding: 0; min-width: 100%!important; font-family: 'Proxima Nova','Open Sans','Gill Sans MT','Gill Sans',Corbel,Arial,sans-serif; font-size: 11px; color: #000000; line-height: 17px;}
a { text-decoration: none; color: #000000;}
img {height: auto;}
.content { margin-top: 20px; margin-bottom: 20px; }
/*Media Queries*/
@media only screen and (max-width: 751px){
body { font-size:15px !important; line-height: 21px;}
.columns{width:100% !important;}
.columncontainer{display:block !important; width:100% !important;}
.listitem, .role {font-size: 16px;}
}
@media only screen and (min-width: 651px) {
.content {width: 650px !important;}
}
</style>
</head>
<body style="background: aqua;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<!--Content Wrapper-->
<table class="content" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" border="0">
<!--Signature-->
<tr>
<td style="padding: 0px 0px 0px 0px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;">
<table border="0" cellpadding="0" cellspacing="0" width="650" class="columns">
<tr valign="top">
<td width="60%" class="columncontainer" style="display:block; width:390px; border-right: 1px solid black; margin-top: 30px">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" style="padding: 30px 30px 30px 30px;"><a href="https://www.studioneonlight.com/"><img width="100%" src="https://www.studioneonlight.com/logo.png" /></a></td>
</tr>
</table>
</td>
<td width="40%" class="columncontainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" style="padding: 30px 30px 30px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr style="font-weight: bold;">
<td width="100%" colspan="2">
Address
</td>
</tr>
<tr>
<td style="line-height: 10px;">
</td>
</tr>
<tr>
<td width="40%" style="font-weight: bold;">telefoon</td>
<td width="60%"><a href="tel:00000">phone number</a></td>
</tr>
<tr>
<td width="40%" style="font-weight: bold;">e-mail</td>
<td width="60%"><a href="mailto:timo@studioneonlight.com">timo@studioneonlight.com</a></td>
</tr>
<tr>
<td width="40%" style="font-weight: bold;">website</td>
<td width="60%"><a href="https://www.studioneonlight.com">studioneonlight.com</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--Legal-->
<tr>
<td style="padding: 10px 30px 30px 30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="font-family: sans-serif; font-size: 13px; color: #ccc; padding: 20px 0 0 0;">
WARNING: I cannot be help responsible for the contents of the message above, as apparently my cats have learned how to type.
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
这可能会有所帮助,但根据我在 Apple Mail 中的理解,html 页面不应包含 html、head 或 body 标签。此签名页应仅包含内联 css 和基本 html 元素,例如 <div>
、<span>
、<img>
等。也许这可能是邮件客户端无法在 OS X 和 iOS.
上按您喜欢的方式解释 html 签名的问题之一
您可以使用的一个很好的代码示例和模板是 A responsive html email signature template。这是一个 GitHub 项目,并且有很好的使用说明。希望这可以帮助你。我可能会将您所拥有的与模板进行比较。原因是为了支持 html 签名跨浏览器和邮件应用程序,您需要确保处理每个邮件客户端和浏览器的所有边缘情况。另一个提示是您应该能够使用 html/css 代码来检测浏览器是否为 safari 并处理 iOS/OS X 边缘情况。看看 Github 项目,它应该能帮到你。
我正在尝试制作 HTML 响应式电子邮件签名。在所有浏览器(Chrome、Safari、Firefox 等)中它工作正常。但是当我发送它时,我的 Apple Mail(OSX 和 iOS)不会让它响应(不缩放):(,他们确实支持它。
这是我的代码,有人可以帮忙吗?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive HTML Email Signature</title>
<style type="text/css">
/*Global Styles*/
body { background: #eeeeee; margin: 0; padding: 0; min-width: 100%!important; font-family: 'Proxima Nova','Open Sans','Gill Sans MT','Gill Sans',Corbel,Arial,sans-serif; font-size: 11px; color: #000000; line-height: 17px;}
a { text-decoration: none; color: #000000;}
img {height: auto;}
.content { margin-top: 20px; margin-bottom: 20px; }
/*Media Queries*/
@media only screen and (max-width: 751px){
body { font-size:15px !important; line-height: 21px;}
.columns{width:100% !important;}
.columncontainer{display:block !important; width:100% !important;}
.listitem, .role {font-size: 16px;}
}
@media only screen and (min-width: 651px) {
.content {width: 650px !important;}
}
</style>
</head>
<body style="background: aqua;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<!--Content Wrapper-->
<table class="content" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" border="0">
<!--Signature-->
<tr>
<td style="padding: 0px 0px 0px 0px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;">
<table border="0" cellpadding="0" cellspacing="0" width="650" class="columns">
<tr valign="top">
<td width="60%" class="columncontainer" style="display:block; width:390px; border-right: 1px solid black; margin-top: 30px">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" style="padding: 30px 30px 30px 30px;"><a href="https://www.studioneonlight.com/"><img width="100%" src="https://www.studioneonlight.com/logo.png" /></a></td>
</tr>
</table>
</td>
<td width="40%" class="columncontainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" style="padding: 30px 30px 30px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr style="font-weight: bold;">
<td width="100%" colspan="2">
Address
</td>
</tr>
<tr>
<td style="line-height: 10px;">
</td>
</tr>
<tr>
<td width="40%" style="font-weight: bold;">telefoon</td>
<td width="60%"><a href="tel:00000">phone number</a></td>
</tr>
<tr>
<td width="40%" style="font-weight: bold;">e-mail</td>
<td width="60%"><a href="mailto:timo@studioneonlight.com">timo@studioneonlight.com</a></td>
</tr>
<tr>
<td width="40%" style="font-weight: bold;">website</td>
<td width="60%"><a href="https://www.studioneonlight.com">studioneonlight.com</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--Legal-->
<tr>
<td style="padding: 10px 30px 30px 30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="font-family: sans-serif; font-size: 13px; color: #ccc; padding: 20px 0 0 0;">
WARNING: I cannot be help responsible for the contents of the message above, as apparently my cats have learned how to type.
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
这可能会有所帮助,但根据我在 Apple Mail 中的理解,html 页面不应包含 html、head 或 body 标签。此签名页应仅包含内联 css 和基本 html 元素,例如 <div>
、<span>
、<img>
等。也许这可能是邮件客户端无法在 OS X 和 iOS.
您可以使用的一个很好的代码示例和模板是 A responsive html email signature template。这是一个 GitHub 项目,并且有很好的使用说明。希望这可以帮助你。我可能会将您所拥有的与模板进行比较。原因是为了支持 html 签名跨浏览器和邮件应用程序,您需要确保处理每个邮件客户端和浏览器的所有边缘情况。另一个提示是您应该能够使用 html/css 代码来检测浏览器是否为 safari 并处理 iOS/OS X 边缘情况。看看 Github 项目,它应该能帮到你。