我使用基本的html表和内联样式创建了一个签名模板。此模板完美地显示在几乎所有电子邮件客户端上，包括Android。大问题是我们的大多数合作伙伴/会员/员工使用iPhone！ （令人震惊，我知道！）任何人都知道如何阻止iPhone显示这样的表格。
这是我的代码
<tr>
<td>
<img src="https://asite.where.img.comes/dnut.png" />
</td>
<td style="padding:5px">
<img src="https://asite.where.img.comes/AOPwording.png" />
<table>
<tr>
<td style="font-family:arial; font-size:10pt; font-weight:bold; color:#1294c2;">
Daryl Liney
</td>
</tr>
<tr>
<td style="font-family:arial; font-size:8pt; color:#4a4949;">
IT Support
</td>
</tr>
</table>
</td>
<td>
<table style="padding-left:5px;" style="border:thin black solid">
<tr>
<td>
<img src="https://asite.where.img.comes/Location.png" />
</td>
<td style="font-family:arial; font-size:10px; color:#4a4949;">
2 Woodbridge Street, London, EC1R 0DG
</td>
</tr>
<tr>
<td>
<img src="https://asite.where.img.comes/Phone.png" />
</td>
<td style="font-family:arial; font-size:10px; color:#4a4949;">
020 7549 ****
</td>
</tr>
<tr>
<td>
<img src="https://asite.where.img.comes/Phone.png" />
</td>
<td style="font-family:arial; font-size:10px; color:#4a4949;">
020 7549 ****
</td>
</tr>
<tr>
<td>
<img src="https://asite.where.img.comes/Print.png" />
</td>
<td style="font-family:arial; font-size:10px; color:#4a4949;">
020 7251 ****
</td>
</tr>
<tr>
<td>
<img src="https://asite.where.img.comes/Message.png" />
</td>
<td style="font-family:arial; font-size:10px; color:#4a4949;">
<a href="mailto:*********@aop.org.uk" style="color:#4a4949;">**********@aop.org.uk</a>
</td>
</tr>
<tr>
<td>
<img src="https://asite.where.img.comes/Globe.png" />
</td>
<td style="font-family:arial; font-size:10px; color:#4a4949;">
<a href="http://www.aop.org.uk" style="color:#4a4949;">www.aop.org.uk</a>
</td>
</tr>
</table>
</td>
</tr>
这就是iphone显示图像的方式 Click
这应该是它的样子 Click
答案 0 :(得分：0)
请在设计HTML模板时尝试遵循最佳做法，因为有许多博客可用于指导在设计模板时要做或不做的事情。
模板中的错误是：
如果您的文本位于宽度设置为小于文本宽度的容器中，则可能在此设备上包装不佳。在这里，我将放置一个示例模板，以便您可以基本了解如何创建模板。
这是一个代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<title>Simples-Minimalistic Responsive Template</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing.*/
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {margin: 0px 0px !important;}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
a {color: #0a8cce;text-decoration: none;text-decoration:none!important;}
/*STYLES*/
table[class=full] { width: 100%; clear: both; }
/*IPAD STYLES*/
@media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #0a8cce; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #0a8cce !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 440px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
img[class=banner] {width: 440px!important;height:220px!important;}
img[class=colimg2] {width: 440px!important;height:220px!important;}
}
/*IPHONE STYLES*/
@media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #0a8cce; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #0a8cce !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 360px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 360px!important;text-align:center!important;}
img[class=banner] {width: 280px!important;height:140px!important;}
img[class=colimg2] {width: 280px!important;height:140px!important;}
td[class=mobile-hide]{display:none!important;}
td[class="padding-bottom25"]{padding-bottom:25px!important;}
}
@media only screen and (max-width: 380px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #0a8cce; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #0a8cce !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 325px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 325px!important;text-align:center!important;}
img[class=banner] {width: 280px!important;height:140px!important;}
img[class=colimg2] {width: 280px!important;height:140px!important;}
td[class=mobile-hide]{display:none!important;}
td[class="padding-bottom25"]{padding-bottom:25px!important;}
}
@media only screen and (max-width: 350px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #0a8cce; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #0a8cce !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 280px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 280px!important;text-align:center!important;}
img[class=banner] {width: 280px!important;height:140px!important;}
img[class=colimg2] {width: 280px!important;height:140px!important;}
td[class=mobile-hide]{display:none!important;}
td[class="padding-bottom25"]{padding-bottom:25px!important;}
}
</style>
</head>
<body>
<!-- Start of preheader -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="preheader" >
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td width="100%" height="10"></td>
</tr>
<!-- Spacing -->
<tr>
<td>
<table width="" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 12px;color: #808080" st-content="viewonline" class="mobile-hide">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" height="10"></td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of preheader -->
<!-- Start of header -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="header">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<tr>
<td>
<!-- logo -->
<table width="140" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<tr>
<td width="169" height="45" align="left">
<div class="imgpop">
<a target="_blank" href="#">
heading
</a>
</div>
</td>
</tr>
</tbody>
</table>
<!-- end of logo -->
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="2columns">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td>
<!-- start of left column -->
<table width="290" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Spacing -->
<tr>
<td>
<!-- start of text content table -->
<table width="290" align="left" border="0" cellpadding="10" cellspacing="0" class="devicewidth">
<tbody>
<!-- image -->
<tr>
<td width="100%" height="1"></td>
</tr>
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 36px; color: #000; text-align:center; line-height: 36px;" st-title="fulltext-title">
Your Heading
</td>
</tr>
<!-- Content -->
<!-- end of Content -->
<!-- end of content -->
</tbody>
</table>
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
<!-- end of left column -->
<!-- start of right column -->
<table width="290" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<!-- Spacing -->
<!-- Spacing -->
<tr>
<td>
<!-- start of text content table -->
<table width="290" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<!-- image -->
<tr>
<td width="290" height="160" align="center" class="devicewidth">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT1UcNyUp_I2JbSRX5G0S-UNdEk3Jv2cwUvsEZAWfs0sd_xKbM7K7A7UVSe" width="200" height="200"alt="" border="0" style="display:block; border:none; outline:none; text-decoration:none;" class="colimg2">
</td>
</tr>
<!-- end of Content -->
<!-- end of content -->
</tbody>
</table>
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
<!-- end of right column -->
</td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" height="10"></td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- end of 2 columns -->
<!-- Start Full Text -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="full-text">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<tr>
<td>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner">
<tbody>
<!-- Title -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #808080; font-weight: bold; text-align:left; line-height: 30px;" st-content="fulltext-content">
<span id="userNameSpan">Hello, Customer</span>
</td>
</tr>
<!-- End of Title -->
<!-- spacing -->
<tr>
<td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- End of spacing -->
<!-- content -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #808080; text-align:left; line-height: 18px;" st-content="fulltext-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fringilla tellus quis lacus tempus malesuada. Mauris consectetur bibendum tellus sed viverra. Aenean scelerisque lacus quis odio interdum, nec hendrerit nibh dapibus. Morbi leo ex, feugiat at elementum eget, ultricies sit amet nibh. Vivamus tristique feugiat condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</td>
</tr>
<!-- End of content -->
</tbody>
</table>
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td height="30" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Start of seperator -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="seperator">
<tbody>
<tr>
<td>
<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">
<tbody>
<tr>
<td align="center" height="30" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td width="550" align="center" height="1" bgcolor="#d1d1d1" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td align="center" height="30" style="font-size:1px; line-height:1px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
您还需要编写媒体查询以支持移动设备中的模板。
快乐的编码！
答案 1 :(得分：0)
我会给你Objective C iOS编码。它适合你。
-(void)viewDidLoad
{
NSString *htmlString = [NSString stringWithFormat:@"%@",htmlData]; //htmlData is you are getting html response to this.It may be string or array means you are getting html response to String htmlData or array htmlData.
[webView loadHTMLString:htmlString baseURL:nil];
}
//WebView Delegate Method
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
CGFloat height = [[webView stringByEvaluatingJavaScriptFromString:@"document.height"] floatValue];
CGRect frame = webView.frame;
frame.size.height = height;
webview.frame = frame;
}
在上面的viewDidLoad方法中，您将html数据加载到webView.So它会自动带到您期望的表单。 在上面的WebView委托方法中，您可以将html数据内容高度设置为webView高度。