iOS端Apple Mail与Gmail应用中邮件模板字体大小适配异常问题

当前HTML邮件模板在Android设备（三星S22的Gmail客户端）中字体适配正常，但在iOS设备（iPhone X、iPhone 13的Apple Mail与Gmail应用）中显示字体极小。已尝试以下方案，求额外解决建议：

• 使用text-size-adjust: none（含ms和webkit前缀）
• 媒体查询中用max-width替代max-device-width
• 媒体查询中为.body_text设置font size: 100% !important

附相关代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="format-detection" content="telephone=no">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="viewport" content="width=device-width; initial-scale=1.0;">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700|Roboto+Slab:100,300,400,700|Roboto:300,300i,400,400i,500,500i,700,700i" media="all" rel="stylesheet" type="text/css">
    <title>Questrade, Inc.</title>
    <style media="all" type="text/css">
        *{
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }
        body{
            -webkit-font-smoothing: antialiased;
        }
    </style>
    <style type="text/css">
        /*Media Queries*/
        @media screen and (max-device-width: 640px){
            .responsive_full_width { width: 100% !important; }
            .h1 { font-size: 18px !important; line-height: 27px !important; }
            .body_text{ font-size: 16px !important; line-height: 24px !important; }
            .footer_text { font-size: 11px !important; line-height: 17px !important; }
            .social_icons { width: 40px !important; }
        }
        @media screen and (max-device-width: 480px){
            .responsive_full_width { width: 100% !important; }
            .h1 { font-size: 18px !important; line-height: 27px !important; }
            .body_text{ font-size: 16px !important; line-height: 24px !important; }
            .footer_text { font-size: 11px !important; line-height: 17px !important; }
            .social_icons { width: 40px !important; }
        }
    </style>
</head>
<body style="-webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; width: 100%; height: 100%; background-color: #FFFFFF">
    <!--wrapper table-->
    <table align="center" border="0" cellpadding="0" cellspacing="0" style="margin: auto; padding: 0;" width="100%">
        <tbody>
            <tr>
                <td>
                    <!--container table-->
                    <table align="center" cellpadding="0" cellspacing="0" style="font-family: 'Open Sans', Verdana, Arial; max-width: 640px; padding: 5px">
                        <tbody>
                            <!--header logo-->
                            <tr>
                                <td>
                                    <img width="100%" height="auto" src="https://media.questrade.com/images/Questrade-Logo-Banner.jpg">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <table width="100%">
                                        <tr><td class="body_text" style="font-size: 16px; line-height: 24px; font-family: 'Open Sans', Verdana, Arial">Body Text</td></tr>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>

补充解决建议 #

1. 给根元素设置基础字号 #

iOS设备对相对单位的解析依赖根元素基准，在全局样式中给html标签固定基础字号：

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

2. 优化媒体查询条件 #

替换max-device-width为max-width，同时结合iOS设备的像素比条件，提升匹配精准度：

@media screen and (max-width: 640px) and (-webkit-min-device-pixel-ratio: 2) {
    .body_text{ font-size: 16px !important; line-height: 24px !important; }
    /* 其他响应式样式保持不变 */
}

3. 行内样式强制指定绝对字号 #

针对iOS邮件客户端的样式优先级特性，在文本元素的行内样式中添加!important强化字号规则：

<td class="body_text" style="font-size: 16px !important; line-height: 24px; font-family: 'Open Sans', Verdana, Arial">Body Text</td>

4. 测试移除x-apple-disable-message-reformatting标签 #

部分iOS Mail版本中，该meta标签可能与字号缩放规则冲突，尝试注释后测试效果：

<!-- <meta name="x-apple-disable-message-reformatting"> -->

5. 全局强制文本元素字号 #

在全局样式中直接给所有文本类标签设置强制字号，覆盖客户端默认样式：

body, td, p, span {
    font-size: 16px !important;
    -webkit-text-size-adjust: none !important;
}

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