Question

我希望签名在桌面版和移动版中显示不同。它在桌面上的两列布局，我想在移动设备中将它们显示在另一个之上。我已经实现了，但是有两个问题。

签名在Outlook应用程序，三星电子邮件应用程序中呈现为桌面布局，并且可以是其他（因为我没有在所有客户端应用程序上对其进行测试的工具），但可以在Gmail应用程序中呈现为移动布局。 / p>
当我从Outlook发送邮件并在Gmail移动应用中看到邮件时，样式就会混乱。布局只需要一个接一个地出现，但是我不知道多余的空间是从哪里来的。（图像已附加）

这是我的代码。我不是专家，只是一个初学者，所以我们将不胜感激。谢谢。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
</head>

<body>

    <table class="as-template" cellspacing="0" cellpadding="0" border="0" style="padding: 0; margin: 0; width: 100%">
        <tbody>
            <tr>
                <td style="vertical-align: top">
                    <table class="as-logo-wrapper" cellpadding="0" cellspacing="0" border="0" width="260" align="left" style="vertical-align: top;padding-right: 10px">
                        <tbody>
                            <tr>
                                <td>
                                    <div style="padding: 0; margin: 0" id="as-logo">
                                        <img style="display: inline-block; width: 250px;" alt="Ascent Security Logo" src="https://via.placeholder.com/250x66" width="250" height="66">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="personal-details" cellpadding="0" cellspacing="0" border="0" width="290" align="left" style="font-family: sans-serif;font-weight: bold;font-size: 14px;margin-top: 8px;">
                        <tbody>
                            <tr class="person-main" style="background-color: #2A3385;border-spacing: 0;color: #fff;vertical-align: middle" valign="middle">
                                <td style="margin: 0; padding: 2px 0 2px 5px" valign="middle">
                                    Mehmood Ahmad, Managing Director
                                </td>
                            </tr>
                            <tr class="person-phone" style="padding: 0;border-spacing: 0; margin: 0">
                                <td style="padding: 5px 0 0 5px; margin: 0;">
                                    Phone: 1234 123 123
                                </td>
                            </tr>
                            <tr class="person-contact" style="padding: 0;border-spacing: 0; margin: 0">
                                <td style="padding: 0 0 0 5px; margin: 0;">
                                    Email: mehmood@example.com.au
                                </td>
                            </tr>
                            <tr class="person-po-box" style="padding: 0;border-spacing: 0; margin: 0">
                                <td style="padding: 10px 0 0 5px ; margin: 0;">
                                    PO Box 123, Street Number City
                                </td>
                            </tr>
                            <tr class="person-address" style="padding: 0;border-spacing: 0; margin: 0">
                                <td style="padding: 0 0 0 5px; margin: 0;">
                                    ACN 123 123 132
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>

</body>

</html>

当我从Outlook向Gmail发送电子邮件时，电子邮件签名样式变得混乱

0 个答案: