【发布时间】:2013-11-29 00:55:49
【问题描述】:
iOS 中的邮件应用程序在调整我的 HTML 签名的图像和文本大小时遇到问题,我有另一个 HTML 签名似乎没有调整大小,但是这个是。在 iOS 邮件应用程序上查看时,文本和图像比应有的大得多。我尝试了各种不同的视口元标记变体,但均无济于事。
这是我的电子邮件签名的 HTML 代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width" />
</head>
<body style="word-wrap: break word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; font-family: Tahoma;">
<table cellspacing="0" cellpadding="6" border="0" style="color: #333;" width="480">
<tbody>
<tr>
<td width="130" rowspan="6" style="width: 1px;"><a href="http://www.unbiased-advice.co.uk/" target="_blank"><img width="130" style="padding-right: 22px; border-right: 1px solid #EEE;" src="http://www.unbiased-advice.co.uk/email-signature/email-logo.gif"/></a></td>
<td width="350" style="padding: 6px 0 0 13px; font-size: 9pt; color: #444; table-align: left;">Kind Regards,</td>
</tr>
<tr>
<td style="padding: 5px 0 6px 13px;"><span style="font-size: 17pt;">Forename Surname</span></td>
</tr>
<tr>
<td rowspan="2" style="padding: 0 0 0 13px;"><img src="http://www.unbiased-advice.co.uk/email-signature/ian-hurst-signature.gif" /></td>
</tr>
<tr>
</tr>
<tr>
<td style="padding: 6px 0 0px 13px; font-size: 10pt;">01722 123 456 <span style="color: #DDD;">|</span> <a style="color: inherit;" href="mailto:test@test.com">name@unbiased-advice.co.uk</a></td>
</tr>
<tr>
<td><span style="padding: 6px 0 0px 5px; font-style: italic; font-size: 12px;">"Straight Forward Advice... In Black and White"</span></td>
</tr>
<tr>
<td style="padding: 12px 0 6px 6px; font-size: 10pt;" colspan="2">
<a href="https://www.facebook.com/HurstFinancial"><img src="http://www.unbiased-advice.co.uk/email-signature/facebook-logo.gif" style="display: inline-block; margin: 0 5px 0 0; vertical-align: top;"/></a><a style="color: inherit;" href="https://www.facebook.com/HurstFinancial">Facebook</a>
<a href="https://www.facebook.com/HurstFinancial"><img src="http://www.unbiased-advice.co.uk/email-signature/twitter-logo.gif" style="display: inline-block; margin: 0 5px 0 5px; vertical-align: top;"/></a><a style="color: inherit;" href="https://twitter.com/hurstfinancial">Twitter</a> <span style="color: #DDD;">|</span>
<a style="color: inherit;" href="http://www.unbiased-advice.co.uk">www.unbiased-advice.co.uk</a>
</tr>
<tr>
<td colspan="2" style="padding: 5px 0 1px 6px; font-size: 10pt; color: #555;">35 Chequers Court, Brown Street, Salisbury, Wiltshire, SP1 2AS</td>
</tr>
<tr>
<td colspan="2" style="font-size: 8pt; color: #AAA; padding-top: 12px;">
<p>Hurst Financial Consultancy Limited is authorised and regulated for investment and mortgage advice by the Financial Conduct Authority Ref 448150.</p>
<p>Our company registered office is: 35 Chequers Court, Brown Street, Salisbury, Wiltshire, SP1 2AS. Co. Registration Number 5616157.</p>
<p>We accept no responsibility for the content of any e-mail as internet communications are not necessarily secure.</p>
<p>Views or opinions presented are those of the author and do not necessarily represent those of Hurst Financial Consultancy Ltd.</p>
<p>Anyone replying by e-mail to the author of this message (or e-mailing anyone else using the <a style="color: inherit;">anyone@unbiased-advice.co.uk</a> address) is advised that such e-mails may be<br> read by persons other than the intended recipient.</p>
<p>No responsibility for viruses is assumed but reasonable steps are taken to ensure e-mail is virus free.</p>
<p>If at any time you would prefer not to receive email from us please <a style="color: inherit;" href="mailto:unsubscribeme@unbiased-advice.co.uk">click here</a> (<a style="color: inherit;">unsubscribeme@unbiased-advice.co.uk</a>) and we will remove your address from future mailings.</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
【问题讨论】:
-
如果我不得不猜测...我会说这是因为您使用 pt 作为字体大小。通常,pt 只能用于印刷媒体,而不能用于屏幕媒体,因为 DPI 的计算方式不同。您可以尝试更改为 px 看看是否有帮助。
-
我确实尝试过,但不幸的是它没有修复它,文本有点小但是图像仍然很大。当我在加载图像时第一次加载电子邮件时,您可以看到它应该如何显示,然后当图像完全加载时,它会放大所有内容。
-
有趣...您可能还想为您的图像宽度指定 px... 我看到您的所有宽度都设置为
width="150"而没有指定 150 what ...我不确定这会导致什么行为。最好将宽度指定为width=150px,看看这是否有助于解决图像问题。 -
从技术上讲,
width标签的使用已经被弃用了一段时间。这也可能导致问题。宽度确实应该指定为style="width:150px"。 -
成功了,我没有意识到它会使用 HTML 5,而且我在其他签名的 img 标签中使用了该宽度属性,这很奇怪。您想将此作为答案发布,以便我将其标记为正确吗?