HTML电子邮件在Outlook中呈现更大

时间:2016-06-08 18:36:10

标签: html email outlook

Outlook(2013)似乎显示我的HTML电子邮件比任何其他客户端都要大。

相对而言,一切似乎都是正确的比例。但是,与在任何浏览器或其他客户端中呈现的电子邮件相比,Outlook看起来很大。

还有其他人得到这个吗?它只是我的Outlook设置,或者我的HTML应该有什么补偿?

enter image description here

左侧的Outlook,右侧的Chrome GMail,从同一屏幕截图中剪切。

标记没什么特别的:

<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;mso-table-layout-alt:fixed;">
    <tr>
        <td></td>
        <td style="display:block!important;max-width:520px!important;margin:0 auto!important;padding:0 10px 40px;" style="width:520px;padding:0 10px 40px;">
            <div style="max-width:520px;margin:0 auto;display:block;width:auto;">
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <p style="font:700 20px/28px Arial;margin:22px 0 0;padding:0;color:#000000;">This is an H1 element</p>
                            <p style="font:100 15px/23px Arial;margin:16px 0 0;padding:0;color:#4d4e53;">This is a paragraph element with text about us and how we should put a period in here somewhere, but I'm a developer not a content writer so that's on you. The color of the paragraphs is #4d4e53 while the Header (H1-H4) are black.</p>
                            <p style="font:700 18px/26px Arial;margin:16px 0 0;padding:0;color:#000000;">This is an H2 element</p>
                            <p style="font:100 15px/23px Arial;margin:16px 0 0;padding:0;color:#4d4e53;">This is another paragraph element. This is a <a href="#" style="text-decoration:none;color:#59BCE9;">link to somewhere</a> and <span style="white-space:nowrap;">614-123-4567</span> is how a phone number is formatted.</p>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
        <td></td>
    </tr>
</table>

1 个答案:

答案 0 :(得分:0)

使用高分辨率屏幕,Outlook缩放级别可自动设置为120 dpi。很高兴知道一切都以正确的比例呈现,但如果它们没有,这是一个你可以使用的解决方案,

https://litmus.com/community/discussions/151-mystery-solved-dpi-scaling-in-outlook-2007-2013

基本上,您可以在顶部添加vml代码,并在样式标记内设置元素的宽度和高度。