响应式HTML电子邮件签名
[英]Responsive HTML E-mail Signature
问题描述
I'm trying to make a HTML responsive e-mail signature. 
我正在尝试制作HTML响应式电子邮件签名。 In all browsers (Chrome, Safari, Firefox etc) it's working fine. 在所有浏览器（Chrome，Safari，Firefox等）中，它都可以正常工作。 But when I send it my Apple Mail (OSX and iOS) won't make it responsive (doesn't scale) :(, and they do support it. 但是当我发送它时，我的Apple Mail（OSX和iOS）不会使其响应（不缩放）:(，并且它们确实支持它。
This is my code, can someone help? 这是我的代码，有人可以帮忙吗？
<!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>
1 个解决方案
解决方案1
2 已采纳 2016-01-14 19:33:35
This might help but from what I understand in Apple Mail, the html page should not have html,head or body tags. 这可能会有所帮助，但是据我对Apple Mail的了解，html页面不应包含html，head或body标签。 This signature page should only include inline css, and basic html elements such as <div> , <span> , <img> , and the such. 此签名页应仅包含内联css和基本html元素，例如<div> ， <span> ， <img>等。 Perhaps this could be one of the problems the mail clients not interpreting the html signature as you like on OS X and iOS. 也许这可能是邮件客户端无法按您在OS X和iOS上解释html签名的问题之一。
A great code example and template you can use is A responsive html email signature template . 您可以使用的一个出色的代码示例和模板是一个响应式html电子邮件签名模板 。 This is a GitHub project and haves great instructions on how to use it. 这是一个GitHub项目，对于如何使用它有很好的说明。 Hopefully this helps you out. 希望这可以帮助您。 I would probably compare what you have to the template. 我可能会将您的内容与模板进行比较。 The reason, is to make an html signature cross browser and mail application supported, you need to make sure you handle all of the edge cases for each mail client and browser. 原因是要使html签名跨浏览器和邮件应用程序受支持，您需要确保处理每个邮件客户端和浏览器的所有极端情况。 Another tip is you should be able to use html/css code to detect if the browser is safari and handle the iOS/OS X edge case. 另一个提示是，您应该能够使用html / css代码检测浏览器是否为野生动物园并处理iOS / OS X边缘情况。 Take a look at the Github Project and that should help you out. 看一下Github项目，这对您有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.