Foundation for Email 2扩展按钮在Gmail Android竖屏适配异常求助

问题背景 #

带有expanded类的按钮在Gmail Android竖屏模式下无法适配所在列宽，但在Gmail网页版、iCloud Mail、Outlook 2007及Gmail Android横屏模式下显示均正常。

原因分析 #

Gmail Android客户端（竖屏状态）对CSS解析存在特殊限制：

• 会过滤或重写部分非内联样式，Foundation Emails的expanded类默认样式可能未被正确识别
• 竖屏viewport下，客户端对块级元素的宽度计算逻辑与其他环境不同，导致按钮无法自动占满父容器

解决方案 #

直接放弃依赖Inky的<button>组件，改用原生<a>标签手动实现expanded按钮样式，并结合内联样式+强制媒体查询兜底：

修改后的Twig代码

{# templates\email\email_test.html.twig #}
{% apply inky_to_html|inline_css(source('@styles/foundation-emails.min.css'), source('@styles/email.css')) %}
<container style="background-color:gold;">
    <row style="background-color:blue;">
        <columns small="12" large="8" valign="middle" style="background-color:#ffd0b2;">
            <a href="#accepter" class="expanded-btn" style="display:block; width:100%; padding:14px 0; text-align:center; background:#0071e3; color:#fff; border-radius:4px; text-decoration:none; font-weight:500;">PRENDRE CONTACT</a>
        </columns>
        <columns small="12" large="4" valign="middle" style="background-color:#8fffe5;">
            <a href="#refuser" class="expanded-btn" style="display:block; width:100%; padding:14px 0; text-align:center; background:#f5f5f7; color:#1d1d1f; border-radius:4px; text-decoration:none; font-weight:500;">REFUSER</a>
        </columns>
    </row>
</container>
{% endapply %}

自定义email.css中的适配样式

/* 针对Gmail Android竖屏的强制适配 */
@media only screen and (max-width: 480px) {
    .expanded-btn {
        width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* 兼容Gmail WebKit内核的兜底规则 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .expanded-btn {
        width: 100% !important;
    }
}

关键说明 #

1. 原生<a>标签的内联样式优先级更高，能避免Gmail过滤类选择器样式
2. width:100%配合box-sizing:border-box确保按钮不会超出列宽
3. !important强制覆盖Gmail客户端的默认样式规则，解决竖屏时的宽度计算异常

内容的提问来源于stack exchange，提问作者onirix