Css 响应电子邮件在iPhone上不起作用_Css_Iphone_Responsive Design_Html Email

Css 响应电子邮件在iPhone上不起作用

css iphone responsive-design

Css 响应电子邮件在iPhone上不起作用,css,iphone,responsive-design,html-email,Css,Iphone,Responsive Design,Html Email,我是新的响应设计，所以我提前道歉。我正在接收我当前的电子邮件，并将其中的一部分回复过来。我有一个三栏电子邮件，并希望它堆叠到一列，并使文本更大。我通过浏览器获得了成功的结果，但一旦我在iPhone5上查看，我什么也得不到。我已经向AOL、Gmail和Outlook帐户发送了邮件，但没有人对这一列做出反应。我在下面列出了我的风格。再一次，我对所有媒体的质疑都是陌生的，所以如果这看起来很可笑，我道歉 <head> <meta name="viewport" content="wid

我是新的响应设计，所以我提前道歉。我正在接收我当前的电子邮件，并将其中的一部分回复过来。我有一个三栏电子邮件，并希望它堆叠到一列，并使文本更大。我通过浏览器获得了成功的结果，但一旦我在iPhone5上查看，我什么也得不到。我已经向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>


@仅介质屏幕和（最大宽度：660像素）{
table.container{宽度：100%！重要；填充：0 4px；}
表1.集装箱{
文本对齐：居中！重要；
字体大小：20px！重要；
}   
.templateColumnContainer{
显示：块！重要；
宽度：100%！重要；
}
}
@仅介质屏幕和（最大宽度：568px）{
table.container{宽度：100%！重要；填充：0 4px；}
表1.集装箱{
文本对齐：居中！重要；
字体大小：20px！重要；
}
.templateColumnContainer{
显示：块！重要；
宽度：100%！重要；
}
}
@仅介质屏幕和（最大宽度：480px）{
table.container{宽度：100%！重要；填充：0 4px；}
表1.集装箱{
文本对齐：居中！重要；
字体大小：20px！重要；
}
.templateColumnContainer{
显示：块！重要；
宽度：100%！重要；
}
}
@仅介质屏幕和（最大宽度：320px）{
table.container{宽度：280px！重要；填充：0 4px；}
表1.集装箱{
文本对齐：居中！重要；
字体大小：20px！重要；
}
.templateColumnContainer{
显示：块！重要；
宽度：100%！重要；
}
}

Gmail、AOL和Outlook.com所有媒体查询。尝试将其发送到iPhone上的默认邮件阅读器。

明智的做法是更改为流体设计。 1.创建一个100%宽度的包装表。 2.嵌套一个宽度为100%的容器表，但其表单元格的宽度和最大宽度可容纳邮件设计宽度。确保在此TD上也放置一个align=center

在这个容器表中，您可以开始构建邮件。使用“对齐属性”创建视口更改后要移动的元素

实际上，您可以对某些移动设备使用媒体查询。放入头部，您可以根据视口的变化使用媒体查询。

让您的电子邮件响应的最佳方法：添加图元：

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

图像src必须使用HTTPS（谷歌代理）的绝对地址。

我建议使用流体混合方法。使用使用

max width

的嵌套表列以及支持它们的客户端的媒体查询

构建适用于所有客户端的基本框架。根据我在多台设备上的经验，在Acid上的Email上的家伙们创建了一个完美的模板，可以无缝地工作（这一个模板工作得这么好，真让人害怕）。多年来，它作为一个样板文件一直为我提供了很好的服务，在这里和那里都有一些小的调整，以改进对HTML电子邮件支持的支持。下载它。他们采用了一种流体混合方法，对表列使用
```
max width
```
Outlook不支持
```
最大宽度
```
，因此您需要对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>

@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;
    }
}