HTML 签名无法在 iPhone 上正确显示

【问题标题】：HTML Signatures not displaying correctly on iPhoneHTML 签名无法在 iPhone 上正确显示
【发布时间】：2015-11-18 11:45:13
【问题描述】：

我使用基本的 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

【问题讨论】：

    标签： html ios iphone


    【解决方案1】：

    在设计 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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</td>
                              </tr>
                              <tr>
                                 <td height="30" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</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;">&nbsp;</td>
                  </tr>
                  <tr>
                     <td width="550" align="center" height="1" bgcolor="#d1d1d1" style="font-size:1px; line-height:1px;">&nbsp;</td>
                  </tr>
                  <tr>
                     <td align="center" height="30" style="font-size:1px; line-height:1px;">&nbsp;</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

   </body>
   </html>

    您还需要编写媒体查询以支持移动设备中的模板。

    编码愉快！

    【讨论】：

    【解决方案2】：

    我会给你 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。因此它会自动带入您期望的表单。 在上面的 WebView 委托方法中，可以将 html 数据内容的高度设置为 webView 的高度。

    【讨论】：

      猜你喜欢
      • 2013-01-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-02-23
      • 2015-04-08
      • 2023-03-29
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode