响应式电子邮件问题答案

【问题标题】：Responsive Email issues响应式电子邮件问题
【发布时间】：2016-03-16 02:25:38
【问题描述】：

经过几天努力编写响应式电子邮件并试图在整个网络上找到答案后，移动设备不使用我的媒体查询，我将其与现成的响应式模板进行了比较，测试、测试并再次测试了不同的配置......但它仍然无法正常工作是我的标题：

<!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 name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <style type="text/css">

        table[class=w600], td[class=w600] {width: 600px!important;}
        body,table,td,p,a,li,blockquote{-webkit-text-size-adjust:none !important;}

        @media only screen and (max-width: 599px), only screen and (max-device-width: 599px) {

            table[class=w600], td[class=w600] {width: 480px!important;}
        }
        @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
            table[class=w600], td[class=w600] {width: 320px!important;}
            p[class=for-pro], a[class=view-in] {font-size: 10px!important;}
            p[class=bottom] {font-size: 12px!important;}
            p[class=frank] {font-size: 16px!important;}
        }
    </style>
</head>

我错过了什么吗？我需要写什么“神奇”的东西才能让它发挥作用，因为它实际上是一个非常简单的时事通讯，正如你所见，只需遵循几条 css 规则。

谢谢。

【问题讨论】：

不要......只是不要推它......电子邮件客户端没有遵循任何标准......你不能创建一个在任何地方都能正常工作的响应式电子邮件

标签： css email media-queries newsletter

【解决方案1】：

并非所有移动设备或移动应用都支持响应式和媒体查询。例如 Android 或 Gmail 应用程序不会。有一些解决方法。特别是让它在 Android 上运行并强制它在 Gmail 上呈现桌面。您可以在此处找到适用于 Android 的解决方案： How to get a responsive HTML email to work on Android?

请记住，关于媒体查询，您可以尝试以这种方式进行设置：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
     <style type="text/css"> 
     @media only screen and (max-width: 500px) {
       *[class].classname{width:100% !important;}
       *[class].classname{float:left !important;}
       *[class].classname{display:block !important;}
     }
     </style>
    </head>

这里有完整的解释： How to code a responsive HTML email table step by step – tutorial

【讨论】：

【解决方案2】：

几件事：1.您正在测试什么浏览器/客户端？ IOS 将作出响应；但是，Android 的本机应用程序没有（Android 4.4）。 2. 不要使用 h1, h2, . . . p 标签。他们的响应因电子邮件客户端而异。将所有样式应用到包含<td>。

这是我开始大多数单栏电子邮件的默认标题。它可以处理您在使用 yahoo、ios 和 Outlook 时可能遇到的许多黑客攻击。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>One Column Mobile Friendly Template</title>

<style>
/*------------------------------------*\
   EMAIL CLIENT SPECIFIC STYLES
\*------------------------------------*/
.ReadMsgBody, .ExternalClass { width:100%; } /* Force Hotmail/Outlook.com to display emails at full width */  
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100%; } /* Force Hotmail/Outlook.com to display normal line spacing */
body, table, td, p, a, li, blockquote { -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } /* Prevent WebKit and Windows mobile from changing default text sizes */
table, td { mso-table-lspace:0pt; mso-table-rspace:0pt; } /* Removes spacing between tables in Outlook 2007 and up */
img { -ms-interpolation-mode:bicubic; } /* Allows smoother rendering of resized images in Internet Explorer */
.footer a { color:/*#ffffff*/; text-decoration:none; } /* Add this class to the system footer to change the unsubscribe link ---does not work for Gmail--- */
.iOSfix a { color:/*#ffffff*/; text-decoration:none; } /* Override the default blue link style that iOS puts on address and phone numbers */
.iOSfixaside a { color:/*#000000*/; text-decoration:none; } /* Alternate Style - Override the default blue link style that iOS puts on address and phone numbers */
.em-dragdrop-dummy { display:none!important; }

/*------------------------------------*\
   RESET STYLES
\*------------------------------------*/
body { min-width:100% !important; }
html { width:100%; }
img { border:0; height:auto; line-height:100%; outline:none; text-decoration:none; }
table { border-collapse:collapse !important; }
body, .emWrapperTable, .emWrapperCell { height:100% !important; margin:0; padding:0; }  
.mobileHeaderWidth .em-dockitem-empty, .mobileFooterWidth .em-dockitem-empty, .emWrapperTable, .emWrapperCell { width:100% !important; }
div { padding:0px !important; }
h1, h2, h3, h4, h5, h6 { display:block; margin:0px; }

/*------------------------------------*\
   MOBILE STYLES
\*------------------------------------*/    
@media only screen and (max-device-width: 720px)  {
    td[class="mobileHeaderCell"],
    td[class="mobileColumnCell"],
    td[class="mobileFooterCell"] { display:block !important; }
    table[class="mobileHeaderWidth"],
    table[class="mobileColumnWidth"],
    table[class="mobileFooterWidth"],
    td[class="mobileHeaderCell"],
    td[class="mobileColumnCell"],
    td[class="mobileFooterCell"] {width:480px!important;}

    /* general display styles */
    td {box-sizing:border-box; }
    span[class="mHide"] { display:none!important; }
    span[class="mBreak"] { display:block!important; }
    p[class="mCenter"] { text-align:center!important; margin:0px 1em!important; }

    /* link styles */

    /* image styles */
    img[class="mFullImage"] { width:100%!important; height:auto!important; }
    img[class="mImgCenter"] { margin:0px auto!important; }
}

@media only screen and (max-device-width: 479px) {
    table[class="mobileHeaderWidth"],
    table[class="mobileColumnWidth"],
    table[class="mobileFooterWidth"],
    td[class="mobileHeaderCell"],
    td[class="mobileColumnCell"],
    td[class="mobileFooterCell"] { width:320px!important; }

    /* general display styles */

    /* link styles */

    /* image styles */
}       
</style>

</head>

【讨论】：