Question

我收到了一封电子邮件，我正在使用基于表格的布局进行编写，这些布局在发送到电子邮件帐户时，会在＆＃34;移动设备优化的＆＃34; Gmail for Android上的较小表单，但在Gmail for iOS上呈现全宽（因此文字较小）。

有关可能发生的事情的任何想法吗？我知道这不是最清楚的问题，我无法将其缩小到导致差异的某组HTML。谷歌搜索也没有产生明显的结果。

＆＃13;

    <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>
</table>

＆＃13;

Answer 1

HTML不是图形格式，保证每个平台上的像素完美结果。对于像这样的东西，PDF更接近（或图像，完全丢失文本信息）。

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

CSS在图形输出方面使它更具可预测性，但是假设任何东西仍然不是很安全（例如我使用的银行网站在我的桌面上看起来很破碎，因为我使用强制最小字体大小，这有点突破他们的表格的布局设计，抵消了与标签不同步的价值线。）

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

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

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

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

Answer 2

我可能会误解，但看起来好像改变了第一行：

<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，因此电子邮件在大屏幕上会更宽，而在较小的屏幕上缩小。

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

2 个答案: