Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/email/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
响应式HTML电子邮件签名_Html_Email_Media Queries_Signature - Fatal编程技术网

响应式HTML电子邮件签名

响应式HTML电子邮件签名,html,email,media-queries,signature,Html,Email,Media Queries,Signature,我正在尝试创建一个响应HTML的电子邮件签名。在所有浏览器(Chrome、Safari、Firefox等)中都可以正常工作。但是当我发送它时,我的苹果邮件(OSX和iOS)不会使它响应(不可扩展):(,而且它们确实支持它 这是我的密码,有人能帮忙吗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g

我正在尝试创建一个响应HTML的电子邮件签名。在所有浏览器(Chrome、Safari、Firefox等)中都可以正常工作。但是当我发送它时,我的苹果邮件(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;">
                                                                &nbsp;
                                                            </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>

响应式HTML电子邮件签名
/*全局样式*/
正文{背景:#eeeeeeee;边距:0;填充:0;最小宽度:100%!重要;字体系列:'Proxima Nova','Open Sans','Gill Sans MT','Gill Sans',Corbel,Arial,Sans serif;字体大小:11px;颜色:#000000;线条高度:17px;}
a{文本装饰:无;颜色:#000000;}
img{height:auto;}
.content{页边距顶部:20px;页边距底部:20px;}
/*媒体查询*/
@仅介质屏幕和(最大宽度:751px){
正文{字体大小:15px!重要;行高:21px;}
.列{宽度:100%!重要;}
.columncontainer{显示:块!重要;宽度:100%!重要;}
.listitem、.role{字体大小:16px;}
}
@仅介质屏幕和(最小宽度:651px){
.content{宽度:650px!重要;}
}
地址
telefoon
电子邮件
网站
警告:我不能不为上面信息的内容负责,因为我的猫显然已经学会了打字。

这可能会有所帮助,但根据我在Apple Mail中的理解,html页面不应包含html、头或体标记。此签名页面应仅包含内联css和基本html元素,如
,等等。这可能是邮件客户端不解释html的问题之一在OS X和iOS上随意签名

您可以使用的一个很好的代码示例和模板是。这是一个GitHub项目,有关于如何使用它的很好的说明。希望这对您有所帮助。我可能会将您所拥有的与模板进行比较。原因是,为了支持html签名跨浏览器和邮件应用程序,您需要确保处理所有的边缘cases用于每个邮件客户端和浏览器。另一个技巧是,您应该能够使用html/css代码来检测浏览器是否为safari,并处理iOS/OS X边缘情况。看看Github项目,这应该会对您有所帮助