iPhone 11/12 Mini HTML/OFT邮件模板深色模式编辑文本背景异常

问题概述 #

• 仅在iPhone 11、iPhone 12 Mini的深色模式下，HTML/OFT邮件模板的可编辑文本区域未按预期显示黑色背景，其余设备表现正常
• 已尝试操作：参考Litmus深色模式指南修改meta配色方案，无改善；合作独立开发者使用同款OFT模板测试目标设备，显示正常

可行排查与修复方案 #

1. 强化iOS深色模式的CSS适配 #

iOS旧机型的邮件客户端对prefers-color-scheme的解析存在特殊性，建议为可编辑区域同时添加内联样式与媒体查询的双重约束：

@media (prefers-color-scheme: dark) {
  [contenteditable="true"] {
    background-color: #000 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
}

同时确保可编辑元素的默认内联样式明确，避免系统自动覆盖：

<div contenteditable="true" style="background-color: #ffffff; color: #000000;">可编辑文本内容</div>

2. 针对OFT模板的兼容性优化 #

OFT作为Outlook专属模板格式，样式容易在导出或传输中丢失，需注意：

• 所有核心样式采用内联写法，避免依赖外部样式表或<style>块（iOS邮件客户端对非内联样式支持有限）
• 为可编辑区域添加-webkit-appearance: none属性，屏蔽iOS系统默认样式干扰：

<div contenteditable="true" style="-webkit-appearance: none; background-color: #ffffff;">可编辑文本内容</div>

3. 目标设备的精准媒体查询适配 #

iPhone 11（414×896px，2x像素密度）与iPhone 12 Mini（360×780px，2x像素密度）的屏幕参数特殊，可针对性添加设备专属样式：

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),
       only screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 2) {
  [contenteditable="true"] {
    background-color: #000 !important;
  }
}

4. 排查模板分发环节的差异 #

若开发者测试正常但你的模板异常，大概率是分发过程中样式被篡改：

• 直接对比你方与开发者的OFT文件，检查核心样式是否一致
• 使用开发者验证正常的OFT文件重新测试，排除导出、压缩或传输导致的样式丢失问题

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