Question

我有一个响应式电子邮件布局，其中一些元素拉伸视口的整个宽度，无论可能是什么。

在Android中（至少4.4上的原生邮件和Gmail应用）两边似乎都有~10px的填充。是否有任何财产或技巧可以否定这一点？

（我觉得这个问题应该已经在某个地方被问过了，但是搜索只提供完全不相关的HTML电子邮件边距问题，如果这是重复的话，很抱歉）。

试过

取消身体边缘。这影响了布局，但没有解决问题。以下代码的结果只是删除了左边的填充，但是在原生应用程序中右边的填充加倍。

html, body{
    padding:0 !important;
    margin:0 !important;
    width:100% !important;
}
div[style*="margin: 16px 0"] { 
    margin:0 !important; 
    font-size:100% !important; 
    width:100% !important; 
}

Gmail应用中没有变化。

更多见解

无论宽度设置如何，视口中的主体似乎都保持相同的宽度。如果将宽度设置为1000px，则会缩小电子邮件以适应任何一侧带边距的区域。边距可以使用边距取消：身体上的边距为0但身体保持相同的大小，导致右侧出现额外的空间。

我相信客户端会以编程方式调整电子邮件的大小以适应给定的宽度。解决这个问题的唯一方法是以某种方式“欺骗”客户。似乎没有什么工作......

Answer 1

问题只是边缘问题，Android 4.4电子邮件客户端在所有方面都应用了保证金值（但实际上并未在右侧显示），因此即使在您的电子邮件消息呈现之前，它也已经与整个视口混淆了。

您可以通过以下块将其标准化。

body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; font-size:100% !important; }

https://blog.jmwhite.co.uk/2015/09/19/revealing-why-emails-appear-off-centre-in-android-4-4-kitkat/

Answer 2

问题出在最外面的div的左侧和右侧。

因此，请制作一个比内容div宽的包装div，然后将内容div置于其中。例如，我的内容div为350px宽，而包装器div为450px。这使我的内容div完美地居中，每边需要50px，这是填充无法实现的。这基本上模仿了我追求的50px左右填充。

对于顶部和底部填充，Gmail没有问题。因此，对于div的顶部和底部，我只能使用padding。

希望这可以帮助像我一样陷入困境的人。

从HTML电子邮件中删除默认的Android填充

2 个答案: