【问题标题】:HTML table in email signature changing sizes when viewed on IOs devices在 IO 设备上查看时,电子邮件签名中的 HTML 表格会改变大小
【发布时间】:2021-08-30 19:37:34
【问题描述】:

我遇到了一个问题,即我们构建的签名几乎适用于除 Iphone 和 Ipad 等 IOS 设备之外的所有设备。在这些设备上,第二个单元比预期的要薄得多,我不知道是因为第一个单元太大还是其他原因造成的。

我认为标准表格 HTML 将是相当通用的,而且我没有任何花哨的代码,所以我认为邮件应用程序如何翻译它是某种奇怪的交互。

我已经尝试将单元格缩短一个像素,以防它不喜欢它如何适合完整的 600 像素宽度表。没有骰子。

知道是什么原因造成的吗?非常感谢您的帮助。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<table style="width: 600px; border-collapse: collapse; font-family: Arial;">
    <tr style="width: 600px;">
        <td colspan="2" style="width: 314px; border-bottom: 2px solid #1a206c; padding-top: 0px; padding-bottom: 8px; vertical-align: top; " >
            <span style="font-size: 18pt; font-weight: bold; color: #1a206c;">
                John Doe
                <a href="https://en.wikipedia.org/wiki/ITIL" style="text-decoration: none;">
                    <img src="http://www.gosafe.com/signatures/personalcerts/itil.png" border="0" alt="Certification"/>
                </a>
            </span>
            <br>
            <span style="font-size: 11pt; font-weight: bold; color: #ff6400; line-height: 20px;">
                Senior Operating Officer
            </span>
        </td>
        <td colspan="2" style="width: 284px; border-bottom: 2px solid #1a206c; padding-top: 0px; padding-bottom: 8px; vertical-align: top;">
            <span style="font-size: 9pt; color: #1a206c; font-family: Arial;">
                <img src="https://www.gosafe.com/signatures/5-2021-images/tollfree.png" alt="Phone Number" vertical-align="center"/>
                <strong style="line-height: 20px;">&nbsp;&nbsp;555.555.5555</strong>&nbsp;&nbsp;
                <img src="https://www.gosafe.com/signatures/5-2021-images/mobile.png" border="0" alt="Mobile"/>
                <strong style="line-height: 20px;">&nbsp;555.555.5555</strong>
            </span>
            <br style="font-size: 9pt;" />
            <span style="font-size: 9pt; color: #1a206c; font-family: Arial; line-height: 20px; vertical-align: middle;">
                <img src="https://www.gosafe.com/signatures/5-2021-images/email.png" border="0" alt="Email"/>
                <strong style="line-height: 20px;">&nbsp;&nbsp;John_Doe@exampleguy.com</strong>
            </span>
            <span style="font-size: 9pt; color: #1a206c; font-family: Arial;"></span>
            <br style="font-size: 8pt;" />
            <span style="font-size: 9pt; color: #1a206c; font-family: Arial; margin-bottom: 0px;">
                <img src="https://www.gosafe.com/signatures/5-2021-images/location.png" border="0" alt="Location"/>
                <strong style="line-height: 20px;">&nbsp;&nbsp;3343 Main Street, Albany, New York, 33939</strong>
            </span>
        </td>
    </tr>
    <tr style="width: 600px;">
        <td style="width: 200px; padding-top: 15px; padding-bottom: 10px;">
            <a href="http://www.goSafe.com">
                <img src="https://www.gosafe.com/signatures/5-2021-images/goSafeLogo.png" border="0" alt="goSafe"/>
            </a>
        </td>
        <td colspan="2" style="width: 200px; padding-top: 5px; text-align: center;">
            <a title="Member of the AD Safety Network" style="text-decoration: none;" href="https://www.adhq.com">
                <img src="https://www.gosafe.com/signatures/5-2021-images/ADsnPerfect.png" border="0" alt="AD Safety Network"/>
            </a>
        </td>
        <td style="width: 200px; padding-top: 15px; padding-bottom: 10px;">
            <p style="font-size: 10pt; font-family: Arial; text-decoration: none;" align="right">
                <a title="goSafe on LinkedIn" style="text-decoration: none;" href="https://www.linkedin.com/company/948460">
                    <img src="https://www.gosafe.com/signatures/5-2021-images/li.png" border="0" alt="Linked In"/>
                </a>&nbsp;
                <a title="goSafe on FaceBook" style="text-decoration: none;" href="https://www.facebook.com/gosafesupply">
                    <img src="https://www.gosafe.com/signatures/5-2021-images/FB.png" border="0" alt="Facebook"/>
                </a> &nbsp;
                <a title="goSafe on Instagram" style="text-decoration: none;" href="https://www.instagram.com/gosafesupply">
                    <img src="https://www.gosafe.com/signatures/5-2021-images/ig.png" border="0" alt="Instagram"/>
                </a>&nbsp;
                <a title="goSafe on Twitter" style="text-decoration: none;" href="https://twitter.com/gosafesupply">
                    <img src="https://www.gosafe.com/signatures/5-2021-images/tw.png" border="0" alt="Twitter"/>
                </a>
                <br>
                <a href="http://www.goSafe.com" style="text-decoration: none;">
                    <span style="color: #ff6400;">
                        <strong title="">www.goSafe.com</strong>
                    </span>
                </a>
            </p>
        </td>
    </tr>
    <tr style="width: 600px;">
        <td colspan="4">
            <p style="width: 600px; padding-top: 0px; padding-bottom: 10px; font-size: 7pt; color: #1a206c; font-family: Arial;">This email and any attachments may contain confidential or proprietary information, the review and usage of which is restricted to the sender and the intended recipient(s). If you are not the intended recipient, please contact the sender and delete all copies of this message and any attachments.</p>
        </td>
    </tr>
</table>
<br /><br />

【问题讨论】:

    标签: html css ios email html-email


    【解决方案1】:

    它有 600 像素宽,而手机只有大约 300 像素!因此,将会进行缩减或切碎或挤压以进行补偿。

    我建议根据“流体设计”原则重新创建。

    【讨论】:

    • 嗯...虽然这可以解释 I-phone 的问题,但它不能解释为什么 I-pad 会出现问题,它应该有超过 300 个像素可以使用,或者为什么它在 gmail 和 Outlook 等 Android 电子邮件应用程序上显示良好(尽管很小)。
    • 哦,还有,我忘了说,当它显示在 iphone 或 ipad 上时,它仍然以 600px 的宽度显示,但由于某种原因,第一个单元格看起来已经扩展到 450 左右像素宽度,将第二个单元格压缩为 150 像素宽度。我刚刚给你的两个数字都是估计值,所以我可以解释我所看到的。姓名和头衔,一个巨大的 honkin' 差距,然后是联系信息。
    • “它在 android 上显示很好(尽管很小)” - 这是因为它应用了完整的电子邮件缩小,因为它太宽了。对于另一个问题,我怀疑是因为 colspans - 这通常与 Outlook 桌面有关。您可以做的是将新行嵌套在表格中,然后您可以取消 colspans。
    猜你喜欢
    • 2014-04-05
    • 1970-01-01
    • 1970-01-01
    • 2017-07-23
    • 2020-06-05
    • 1970-01-01
    • 1970-01-01
    • 2021-08-21
    • 2012-02-17
    相关资源
    最近更新 更多