iOS上的Gmail和Android上的Gmail呈现不同

我有一封电子邮件我正在撰写使用基于表格的布局，这些布局在发送到电子邮件帐户时，会在Android版Gmail的“移动优化”较小表单中呈现行，但在iOS版Gmail上呈现为全角（因此为小文字）。iOS上的Gmail和Android上的Gmail呈现不同

这里有什么想法可能会发生什么？我知道这不是最明确的问题，我不能将其缩小到某个导致差异的html集合。谷歌搜索也没有产生明显的结果。

谢谢！

<table width=100% cellspacing="0" cellpadding="0" style="" class=""> 
    <tr width="100%"> 
     <td width="100%" style=" 
     padding: 10px; 
     box-shadow: 0 2px 0 0 #f1f1f1; 
     background-color: #ffffff; 
    " class=""> 


<table cellspacing="0" cellpadding="0" width='100%' style='' align='' class=""> 


<tr style='' class=''> 


<td width='' height='' style=' 
     width: 150px; 
     min-width: 150px; 
     line-height: 0; 
    ' align='' valign='top' class='list-card__header' colspan='1'> 


<table cellspacing="0" cellpadding="0" width='100%' style='' align='' class=""> 


<tr style='' class=''> 


<td width='' height='' style=' 
     width: 150px; 
     max-width: 150px; 
     height: 75px; 
     line-height: 0; 
     overflow: hidden; 
    background-color:#dedede' align='center' valign='middle' class='list-card__image-wrapper' colspan='1'> 

            <img class="list-card__image" src="https://cdn.evbstatic.com/s3-build/perm_001/f8c5fa/django/images/discovery/default_logos/4.png" style=" 
     overflow: hidden; 
     max-width: 150px; 
     height: 75px; 
    " border="0" /> 

</td> 


</tr> 


</table> 


</td> 


<td width='*' height='' style=' 
     padding-left: 15px; 
     min-width: 150px; 
    ' align='left' valign='top' class='list-card__body' colspan='1'> 

         <div class="list-card__date" style=" 
     text-overflow: ellipsis; 
     overflow: hidden; 
     white-space: nowrap; 
     color: #343434; 
     font-size: 12px; 
     line-height: 20px; 
     height: 20px; 
     text-transform: uppercase; 
     letter-spacing: 1px; 
     padding-top: 5px; 
     min-width: 150px; 
     width: 150px; 
    "> 
          Sat, Dec 31 
         </div> 
         <div class="list-card__title" style=" 
     display: -webkit-box; 
     -webkit-line-clamp: 2; 
     -webkit-box-orient: vertical; 
     overflow: hidden; 
     height: 36px; 
     max-height: 36px; 
     color: #333333; 
     font-size: 15px; 
     font-weight: 700; 
     line-height: 18px; 
     letter-spacing: 0; 
     min-width: 150px; 
    "> 
          Hunger Plus, Inc. 
         </div> 
         <div style=" 
     display: -webkit-box; 
     -webkit-line-clamp: 1; 
     -webkit-box-orient: vertical; 
     text-overflow: ellipsis; 
     overflow: hidden; 
     font-size: 12px; 
     line-height: 20px; 
     height: 20px; 
     color: #8c8c8c; 
     min-width: 150px; 
     width: 150px; 
     height: 20px; 
     max-height: 20px; 
    "> 
          Hunger Plus, Inc. 
         </div> 

</td> 


</tr> 


</table> 


     </td> 
    </tr>

来源

2016-08-23 phildini

我有很多想法，可能会出错:)你可以发布你尝试过的代码的一个小例子吗？ –

HTML不是图形格式，保证了每个平台上的像素完美结果。对于类似这样的内容，PDF更接近（或者图像，完全没有文本信息）。

HTML是“超文本标记语言”，所以它主要用于传输文本内容，并附加标记以帮助处理（呈现/使用）内容。

CSS在图形输出方面做出了更多的预测，但它仍然不是很安全的假设任何东西（例如我使用的银行网页在我的桌面上看起来很糟糕，因为我使用强制的最小字体大小，位的表格布局设计，抵消价值线与标签不同步）。

但这是HTML，而你正在谈论电子邮件。只要你的目标只是Gmail，至少你可以检查结果是什么样子。但是，如果您想发送适当的通用电子邮件（而不是假设接收方正在使用Gmail应用程序阅读），则实际上应该发送有效的纯文本版本（与HTML一起）。 HTML扩展甚至不是标准的一部分，仍然有约3％的人使用纯文本邮件客户端（像我一样）。

那么你的问题是什么？你的电子邮件是否应该主要在手机屏幕上阅读？然后用较少的列创建表，所以它会足够窄？或者查看一些CSS魔术来为报告不同屏幕宽度的设备创建布局的不同变体。

无论哪种方式，你不能指望像素完美呈现，因为每个设备都有不同的屏幕，或者用户可以在窗口只能在运行邮件应用程序，或者用户可以执行不同的字体大小等

所以，正常情况下，不同的设备/应用程序会以不同的方式呈现HTML，如果您的HTML设计合理，它不应该对您造成任何问题。

来源

2016-08-23 17:34:45 Ped7g

我可以误解，但它看起来像改变第一行：

<table width=100% cellspacing="0" cellpadding="0" style="" class="">

这样：

<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">

解决了这个问题。 <table width=100% ...>导致布局为全宽。编辑后的代码使电子邮件100％，但只能达到600px，因此电子邮件将在大屏幕上变宽，并在较小的电子邮件上缩小。

来源

2016-08-23 20:49:00

iOS上的Gmail和Android上的Gmail呈现不同

回答

相关问题