ios - 响应式表格在除默认 iOS 7 邮件应用程序之外的所有内容中都能完美呈现

转载作者：塔克拉玛干更新时间：2023-11-02 08:58:14

默认的 iOS 7 (iOS 7.1.1) 邮件应用程序无法正确呈现此表格。 Chrome、Firefox 和 Safari(最新版本)都完美地呈现了桌面 View 和移动 View 。 Internet Explorer 可以正确呈现桌面 View ，但不能正确呈现移动 View (这很好)。 iOS Safari 完美呈现移动 View 。 Here is a JSFiddle当您调整它的大小时，这表明它可以正常工作。 Here is a screenshot它在 iOS 邮件中的呈现方式。

HTML

<div id="responsive-table">
<table class="body-copy" style="font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
    <thead>
        <tr>
            <th>Item #</th>
            <th>Description</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>#####1</td>
            <td>Item Description goes here I</td>
            <td>1</td>
            <td>$9.49</td>
            <td>$9.49</td>
        </tr>
        <tr>
            <td>#####2</td>
            <td>Item Description goes here II</td>
            <td>2</td>
            <td>$9.99</td>
            <td>$19.98</td>
        </tr>
        <tr>
            <td>#####3</td>
            <td>Item Description goes here III</td>
            <td>4</td>
            <td>$3.79</td>
            <td>$15.16</td>
        </tr>
        <tr>
            <td>#####4</td>
            <td>Item Description goes here IV</td>
            <td>1</td>
            <td>$17.94</td>
            <td>$17.94</td>
        </tr>
        <tr>
            <td>#####5</td>
            <td>Item Description goes here V</td>
            <td>3</td>
            <td>$4.99</td>
            <td>$14.97</td>
        </tr>
    </tbody>
</table>
</div>

CSS

@media screen and (max-width: 480px) {
/* Force table to not be like tables anymore */
#responsive-table table, thead, tbody, th, td, tr {
    display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
#responsive-table tr {
    border: 1px solid #ccc;
    margin-bottom: 25px;
}
#responsive-table td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 42% !important;
}
#responsive-table td:before {
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
}
#responsive-table td:nth-of-type(1):before {
    content:"Item #";
}
#responsive-table td:nth-of-type(2):before {
    content:"Description";
}
#responsive-table td:nth-of-type(3):before {
    content:"Quantity";
}
#responsive-table td:nth-of-type(4):before {
    content:"Price";
}
#responsive-table td:nth-of-type(5):before {
    content:"Total";
}
}

#responsive-table{margin:0 0 20px 0;}
#responsive-table table{width:100%;border-collapse:collapse;}
#responsive-table th{background:#43904B;font-weight:bold;color:#FFFFFF;}
#responsive-table td,th{padding:7px 16px;text-align:left;border:0;border-style:solid;border-bottom:thin solid #E6E6E6;}

我尝试过的一些事情:

通过 Apple iCloud 邮件将电子邮件发送到同一部 iPhone。结果:没有变化。
在 Gmail iOS 应用程序中查看电子邮件。结果:呈现完美。
删除了所有评论(你永远不知道)。结果:没有变化。
已更改 <meta name="viewport" content="width=320, target-densitydpi=device-dpi">至 <meta name="viewport" content="width=device-width, initial-scale=1.0">结果:没有变化。

杂项

如果有任何帮助，这就是 useragentstring.com 告诉我用户代理用于邮件应用程序的内容(我在 iframe 中给自己发送了一封电子邮件。不知道这是否正确。)。

Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D201

当您使用浏览器查看页面时，最后缺少有关 Safari 的部分。

Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53

出于好奇，我开始了 with this .

更新

已添加 word-wrap: normal !important;到 #responsive-table td {}，它修复了垂直文本故障。
Changing position: relative; to position: absolute; 导致以下屏幕截图。这不是我想要的，但邮件应用程序确实以与浏览器相同的方式呈现它。显示邮件应用不喜欢position: relative; .

Fixed vertical text

最佳答案

您遇到问题的原因是因为您使用了很多电子邮件客户端不支持的代码。使某些东西在浏览器中看起来不错很容易，当您为电子邮件编写代码时，您必须记住将代码简化到极致。没有花哨的东西。

无需深入探讨该主题。您不应使用 XHTML1 成为标准时不存在的任何代码，因为大多数电子邮件客户端都基于 XHTML1 文档类型。您还应该尝试尽可能多地使用 HTML 而不是 CSS，因为电子邮件中的 CSS 很糟糕。

我为使您的代码正常工作所做的更改:

样式是在每个单元格上定义的，因为电子邮件中的固有样式是不可靠的。
删除了边框样式以支持产生相同效果的 HTML 表格属性 rules=rows frame=box
行高已转换为像素值而不是百分比，因为您会发现电子邮件中的百分比值有时会出错，特别是行高(在 Outlook 中不起作用)
您使用的所有高级 CSS 都已删除，因为它在电子邮件中完全不受支持，而且根本不需要。
不支持 CSS 定位属性(顶部、右侧、底部、左侧、绝对、相对等)

这是您的完整代码。我没有花时间完全匹配您的内容，您必须自己做。我只是将同一部分复制了三遍来为您证明示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        html,body {width:100% !important;-webkit-text-size-adjust:none;margin:0;}
        body, td{-webkit-text-size-adjust:none;}
        .ReadMsgBody, .ExternalClass {width: 100% !important;background-color:#ffffff;}
        .ExternalClass * {line-height: 100%} 
        table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
        table td {border-collapse: collapse;}
        table.responsive {width:600px;}
        @media screen and (max-device-width: 600px), screen and (max-width: 600px) {
            table[class="responsive"]{width:100%;}

        }
    </style>
</head>

<body bgcolor="#ffffff" border="0" style="min-width:100%;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;color:#666666;font-family:Arial,sans-serif;">

<center>
<table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="top">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>
                            <table align="center" class="responsive" rules=rows frame=box style="font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
                                </tr>
                            </table>
                            <table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
                            <table rules=rows frame=box width="100%" style="max-width:600px;font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
                                </tr>
                            </table>
                            <table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
                            <table rules=rows frame=box width="100%" style="max-width:600px;font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>
</center>
</body>
</html>

测试结果

iOS 邮件

enter image description here

谷歌邮箱

enter image description here

美国在线

enter image description here

雅虎

enter image description here

关于ios - 响应式表格在除默认 iOS 7 邮件应用程序之外的所有内容中都能完美呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23398604/

文章推荐： ios - 对包含 NSRange 值的数组进行排序

文章推荐： Android 从 onActivityResult 接收值并将其设置为 Button

文章推荐： android - 应用程序未启动 - React Native (Android)

ruby - 当我运行 "gem list"时， bundler (默认 : 1. 16.2)是什么意思？什么是(默认)部分？
我收到此错误消息: .rvm/gems/ruby-2.5.1/bin/ruby_executable_hooks:24:in `' 我重新安装了 Ruby rvm reinstall ruby-2.5
icons - 默认/通用功能区图标
我开始从事 WPF Ribbon 开发，非常好! 我的问题是找到(免费)基本图标(如文件保存/打开/等，剪切/粘贴/等)。你有什么建议吗？最佳答案你看过Visual Studio Icon Li
ios - 如何播放日历警报声和弦(默认)？
我只找到经典的声音ID，但我需要Chord(默认)日历警报。如何播放声音？ ks #define systemSoundID 1315 AudioServicesPlaySystemSound (s
Magento - 电子邮件发货 = 默认
在 Magento 中创建货件时，有一个复选框可让您“通过电子邮件发送货件副本”。默认情况下未选中。有谁知道我需要编辑哪个文件才能默认设置为“选中”？最佳答案这是一个app/design/adm
c# - 默认 IValueConverter
我有一个简单的 IValueConverter，它只使用 TypeConverter 进行转换。但是，在某些情况下，提供的 TypeConverter 会失败。如果转换器未提供 Binding，我想
android - 默认 Activity
我正在阅读教程，默认 Activity 是一个扩展另一个类的类，它所拥有的只是一个覆盖方法。应用程序如何工作，因为它不做任何其他事情？我很困惑! 最佳答案父类 Activity 为您处理一切。关于
java - 无法连接到数据库 [默认]
我刚刚开始研究游戏框架。我正在尝试构建 rest api，并将 postgresql 用于我的数据库连接。这是我第一次同时使用 play 和 postgre。我在 build.sbt 中建立了一个数据
Python 默认/未命名方法
是否可以创建具有以下属性的 python 对象: class Foo: def __default_method__(x): return x f = Foo() f(10) > 10
jQuery 默认/占位符输入文本和保存信息的问题
我是 jQuery 的新手，遇到了一个烦人的问题。我有一些登录字段，当该字段为空时会填充默认文本，然后在单击时删除。我的问题是，当用户保存了他们的用户名/密码(使用浏览器)时，如果他们返回页面，登录
c++ - (默认)为每个可变类型构造一个对象
考虑这个代码片段: void Foo(std::string str1, std::string str2) {} template void Bar() { Foo(Types{}...);
c - 默认 GCcflags
我正在编写一个简单的 C 程序，我应该用缓冲区溢出来攻击它。所以，我不想在编译时使用任何标志。如何消除使用的默认标志？ # readelf -p .GCC.command.line stack Str
c++ - (默认)为每个可变类型构造一个对象
考虑这个代码片段: void Foo(std::string str1, std::string str2) {} template void Bar() { Foo(Types{}...);
C++ 默认、复制和提升构造函数
我有以下代码[这是一道面试题]: #include #include using namespace std; class A{ public: A(){ cout co
c# - 每个匹配生命周期范围的实例，默认？
我想在 Autofac 中为每个匹配的生命周期范围注册创建一个实例，但偶尔需要从全局容器(没有匹配的生命周期范围)请求一个实例。在不存在匹配生命周期范围的情况下，我想给出一个顶级实例而不是抛出异常。
javascript - 默认 Javascript 对象很大时速度很慢？
我正在做一个收集单词共现的修改版本，所以我编写了自己的 javascript，我正在跟踪三个对象中的出现。但是，一旦对象变大(约 800 万、300 万和 172000)，每 100000 个句子需要
numpy - pykalman:(默认)处理缺失值
我正在使用 pykalman 模块中的 KalmanFilter，我想知道它如何处理缺失的观察结果。根据文档: In real world systems, it is common to have
wpf - 默认 RenderTransform 转换器语法
我有一个应用了 RenderTransform 的 Canvas ，如下所示: 谁能告诉我这些值是什么意思？我似乎无法找到用于解析这些值的转换器。最佳答案如 RenderTransform是 T
authentication - 默认 key 环密码
我是 Linux 的新手，现在使用 CentOS 6。我在这里使用 MySQL 工作台，每当我尝试添加新连接时，它都会询问我默认的 key 环密码。我真的不知道，这个密码是从哪里设置的，我之前没有设置
Linux - 默认 OpenGL 版本
我在 Ubuntu 18.04 上工作。我没有定义 GL_GLEXT_PROTOTYPES .我使用 glXGetProcAddress 加载“核心”OpenGL 函数.我的申请链接到 /usr/li
ubuntu - 默认 SSL 证书目录
我按照文档中的示例添加了对使用 asio 加载 HTTPS 站点的支持，这意味着我调用 ctx.set_default_verify_paths();使用系统默认路径来查找证书。然而，我得到:una

塔克拉玛干

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

ios - 响应式表格在除默认 iOS 7 邮件应用程序之外的所有内容中都能完美呈现

HTML

CSS

我尝试过的一些事情:

杂项

更新

测试结果