响应迅速的电子邮件不起作用iPhone

我是响应式设计的新手，所以我提前道歉。我正在收集我当前的电子邮件，并将其中一部分响应。我有一个3列电子邮件，希望它堆放到一列，并使文本更大。我通过浏览器获得了成功的结果，但是一旦我在iPhone 5上检查它，我就一无所获。我已发送到AOL，Gmail和Outlook帐户，没有一个对一列反应。我在下面列出了我的样式。同样，我是整个媒体查询的新手，所以如果看起来很荒谬，我深表歉意。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style type="text/css">
    @media only screen and (max-width: 660px) {
    table.container {width: 100% !important; padding:0 4px;}    
            table.container {
        text-align: center !important;
        font-size:20px !important;
    }   
    .templateColumnContainer{
        display:block !important;
        width:100% !important;
    }
}
@media only screen and (max-width: 568px) {
    table.container {width: 100% !important; padding:0 4px;}    
    table.container {
        text-align: center !important;
        font-size:20px !important;  
    }
    .templateColumnContainer {
        display:block !important;
        width:100% !important;
    }
}
  @media only screen and (max-width: 480px) {
    table.container {width: 100% !important; padding:0 4px;}    
    table.container {
        text-align: center !important;
        font-size:20px !important;  
    }
    .templateColumnContainer {
        display:block !important;
        width:100% !important;
    }
}
@media only screen and (max-width: 320px) {
    table.container {width: 280px !important; padding:0 4px;}   
    table.container {
        text-align: center !important;
        font-size:20px !important;  
    }
    .templateColumnContainer {
        display:block !important;
        width:100% !important;
    }
}

            </style>
        </head>

gmail，aol和outlook.com都不支持媒体查询。尝试将其发送给iPhone上的默认邮件读取器。

更改为流体设计是明智的。1.创建一个包装桌100％宽度。2.嵌套宽度100％的容器表，但具有宽度和最大宽度的表单元，可容纳您的邮件设计宽度。请确保也将Align =也在此TD上。

在此容器表中您的启动构建邮件。使用Align属性创建元素，一旦视口更改。

您实际上可以在某些移动设备中使用媒体查询。放在头上，您可以根据视口更改使用媒体查询。

最好的方式使您的电子邮件响应：添加元：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />

如果您需要sans-serif字体以使其成为Outlook，请将其放在头上：

：

<!--[if mso]>
<style type="text/css">
    h1, h2, h3, h4, h5, h6, p, a, span, td, em, strong {
        font-family: Helvetica, Arial, sans-serif;
    }
</style>
<![endif]-->

制作基于桌子的设计。

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
<tbody>
<tr>
    <td valign="middle" align="center">
        <table class="fullwidth" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="borde-r-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
            <tbody>
            <tr>
                <td style="font-size:5px;line-height:5px; height: 10px">&nbsp;</td> <!-- paddign & margin not supported by Outlook -->
            </tr>
            <tr>
                <td valign="middle" align="center">
                    <!-- Add fun here -->
                </td>
            </tr>
            <tr>
                <td style="font-size:5px;line-height:5px; height: 10px">&nbsp;</td>
            </tr>
            </tbody>
        </table>
    </td>
</tr>
</tbody>

在需要适合媒体查询中完整尺寸的表上添加类fullwidth（例如480）：

@media only screen and (max-width: 480px){
    .fullwidth,
    .fullwidth tbody,
    .fullwidth tbody > tr,
    .fullwidth tbody > tr > td,
    .fullwidth tbody > tr > th,
    table[class=fullwidth],
    table[class=fullwidth] tbody,
    table[class=fullwidth] tbody > tr,
    table[class=fullwidth] tbody > tr > td,
    table[class=fullwidth] tbody > tr > th
    td[class=main-border] {
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
        display: block !important;
        clear: both;
        margin: 0 auto !important;
    }
}

图像SRC必须具有HTTPS（Google Proxy）

的绝对地址

我建议一种流体杂交方法。使用使用max-width以及支持它们的客户端的媒体查询的嵌套表列。

建立一个适合所有客户的基本骨架。在酸上的电子邮件上，这些家伙创建了一个美丽的模板，以我在多个设备之间的经验中无缝地工作（这一个模板非常有效，这很恐怖）。多年来，它一直为我提供了很好的服务，多年来，这里和那里进行了一些小调整，以改善对HTML电子邮件支持的支持。在这里下载。他们采用了使用max-width作为表列的流体杂交方法。
Outlook不支持max-width，因此您需要求助于有条件的Outlook。在这里阅读有关它的信息。我上面提到的模板的链接具有为其编写的条件。
为支持他们的电子邮件客户端编写媒体查询。在这里参考他们。

相关内容

最新更新

热门标签：