如何使响应式电子邮件与雅虎移动应用程序一起使用?

How to make responsive email work with yahoo mobile app?

我创建了一个电子邮件模板,该模板经过测试可以在 gmail/yahoo/outlook 等桌面客户端上正常工作,并且还测试了在移动 gmail 应用程序上的正确响应行为。我正在使用 Android/Galaxy S4。

响应式样式在雅虎移动应用程序上无效。事实上,它不是从 'style' 读取 CSS 规则。虽然,桌面 chrome 设置为移动视图(使用检查 -> 切换设备工具栏)并登录到雅虎邮件显示阅读响应式样式的电子邮件。

问:yahoo mobile app不支持响应式吗?或者,它是否特别需要额外的技巧?


更新: 我尝试将 CSS 样式从 head 移动到 body。然后它读取样式。但是在 body 中使用样式可能不是一个好主意,gmail 移动应用现在忽略它。


这是我使用的电子邮件代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sample Page</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">
    <style>
        body {
            mso-line-height-rule:exactly;
            -ms-text-size-adjust:100%;
            -webkit-text-size-adjust:100%}
        table, td {
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt}
        table {
            border-collapse: collapse;
            border-spacing: 0;margin: 0 auto}
        img, a img {
            border:0 none;
            height: auto;
            line-height: 100%;
            outline: none;
            -ms-interpolation-mode: bicubic}
        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important}
        .x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
            border-bottom: 0 !important;
            cursor: default !important}
        .a6S {
            display:none !important;
            opacity:0.01 !important}
        img.g-img + div {
            display:none !important}
        .button-link {
            text-decoration: none !important}
        @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
            .ios-gm-fix {
                min-width: 375px !important;}
        }
    </style>
    <style>
        #email-container {
            border:1px solid #CCC;
            border-radius:3px;
            border-collapse:separate}
        .desktop-view {color:blue}
        .mobile-view {color:#444}
        @media only screen and (max-width: 480px) {
            #email-container-wrap {
                width:100% !important;
                padding:0 !important}
            #email-container {
                border:none;border-radius:0}
            .desktop-view {color:#444}
            .mobile-view {color:blue}
            #email-contents {
                padding:15px 22px !important;
                font-size:16px!important}
        }
    </style>
</head>
<body width="100%" bgcolor="#FFFFFF" style="margin:0 auto;padding:0;height:100%">
    <center style="width=100%;background=#ffffff">
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F0F0F0" class="ios-gm-fix" style="margin:0;width:100%;line-height:100%"><tbody>
        <tr>
            <td align="center" valign="top" width="100%" style="padding:0;margin:0;height:100%;width:100%">
                <div id="email-container-wrap" style="width:600px;max-width:600px;padding:25px 0;margin:0 auto">
                    <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" id="email-container" style="background-color:#ffffff"><tbody>
                        <tr>
                            <td align="center" valign="top" width="100%" id="email-contents" style="font-family:arial,helvetica,sans-serif;font-size:13px;line-height:18px;color:#333333;padding:20px 35px">
                                <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
                                    <tr>
                                        <td align="center" valign="top" width="100%" id="email-header">
                                            <table  role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
                                                <tr>
                                                    <td align="left" valign="top" width="100%"></td>
                                                </tr>
                                            </tbody></table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center" valign="top" width="100%" id="email-body">
                                            <table  role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
                                                <tbody>
                                                    <tr>
                                                        <td align="left" valign="top" width="100%">
                                                            <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
                                                                <tr>
                                                                    <td align="left" valign="top" width="100%" class="desktop-view" style="padding:3px 0 16px">
                                                                        <span>On Desktop, there will be a border and gray background on all sides.</span>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td align="left" valign="top" width="100%" class="mobile-view" style="padding:3px 0 16px">
                                                                        <span>On Mobile, the border and background will not exist.</span>
                                                                    </td>
                                                                </tr>
                                                            </tbody></table>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center" valign="top" width="100%" id="email-footer">
                                            <table  role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
                                                <tr>
                                                    <td align="left" valign="top" width="100%">
                                                    </td>
                                                </tr>
                                            </tbody></table>
                                        </td>
                                    </tr>
                                </tbody></table>
                            </td>
                        </tr>
                    </tbody></table>
                </div>
            </td>
        </tr>
    </tbody></table>
    </center>
</body>
</html>

在 Android 上,Yahoo 仅支持 <body> 中的 <style> 标签,不支持 <head> 中的标签。但是 Gmail 只支持 <head> 中的 <style> 标签,而不支持 <body> 中的标签。这就是生活!

由于我们只处理约 20 行代码(假设您的示例中有第二个 <style> 标记),您可以尝试复制此 <style> 标记,使其同时出现在 <head><body>。我不确定这是否有效,但值得测试。