android - HTML 电子邮件在 Gmail 应用程序中看起来不同-6ren

android - HTML 电子邮件在 Gmail 应用程序中看起来不同

转载作者：行者123 更新时间：2023-11-28 10:55:45

我不太习惯制作 html 电子邮件。当然，我必须开始在基本上是同一封电子邮件的两个版本中制作一个响应式邮件。当我以为我已经为大多数客户完成了它时，我意识到适用于 Android 和 iOS 的 gmail 应用程序让电子邮件有了第三次查看。我已经阅读了 gmail 删除标题部分的内容，但即使我尝试对其进行样式设置，内联 gmail 应用程序仍然是第三种外观。下面评论中的图片链接显示了移动设备和 Gmail 应用程序的外观。问题是我有三列应该变成一列，将图像向左移动，标题和文本向右移动(如移动图像)。 Gmail 应用程序在每一行显示图像、标题和文本。它最多应该看起来像移动版，或者至少看起来像桌面版。

感谢任何帮助。

谢谢

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
        <style type="text/css">


            .ReadMsgBody {width: 100%; background-color: #ffffff;}
            .ExternalClass {width: 100%; background-color: #ffffff;}
            body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased; font-family: Georgia, Times, serif}
            table {border-collapse: collapse;}
            table td { border-collapse: collapse; } 
            h2, p {margin: 0;}
            h2 {padding-top: 15px;}
            .img, .text {display: block;}
            body .deviceWidth {width: 680px}
            @media only screen and (max-width: 640px)  {
                body .deviceWidth {width: 440px!important; padding:0;}  
                body .center {text-align: center!important;}
                table.triplet {width: 99% !important; padding-bottom: 20px !important;}
                .noPadding {padding-left: 0!important;}
                .img, .text {width: 50%;}
                .text p {padding-right: 20px;}
                h2 {padding-top: 0!important;}
            }

            @media only screen and (max-width: 479px) {
                body .deviceWidth {width: 300px!important; padding:0;}  
                body .center {text-align: center!important;}
                .img img {width: 140px;}
            }
        </style>
        <!-- Targeting Windows Mobile -->
        <!--[if IEMobile 7]>
        <style type="text/css">

        </style>
        <![endif]-->
    </head> 
    <body bgcolor="#ffffff" style="font-family: Georgia, Times, serif">

        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="100%" valign="top" bgcolor="#ffffff" style="padding-top: 20px;">
                    <table class="container deviceWidth" width="700" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">

                        <tr>
                            <td style="padding: 0 10px 50px;" bgcolor="#ffffff" align="center" class="deviceWidth">
                                <img src="http://placehold.it/680x300" class="deviceWidth" border="0" alt="">
                                <h1 align="left">Header 1</h1>
                                <p align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            </td>
                        </tr>

                        <tr>
                            <td class="deviceWidth" style="padding: 0;" width="700">
                                <table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
                                            <!--[if IE]>
                                              <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                                                <tr>
                                                  <td>
                                            <![endif]-->
                                            <table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x210" border="0" alt=""></p></td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                <tr>
                                                <td>
                                            <![endif]-->
                                            <table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td>
                                                        <h2>Offer 1</h2>
                                                        <p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                </table>
                                            <![endif]-->
                                        </td>
                                    </tr>
                                </table>
                                <table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
                                            <!--[if IE]>
                                              <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                                                <tr>
                                                  <td>
                                            <![endif]-->
                                            <table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x300" border="0" alt=""></p></td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                <tr>
                                                <td>
                                            <![endif]-->
                                            <table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td>
                                                        <h2>Offer 2</h2>
                                                        <p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                </table>
                                            <![endif]-->

                                        </td>
                                    </tr>
                                </table>
                                <table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="padding: 0; padding-left: 10px; padding-bottom: 20px;" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
                                            <!--[if IE]>
                                              <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                                                <tr>
                                                  <td>
                                            <![endif]-->
                                            <table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x100" border="0" alt=""></p></td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                <tr>
                                                <td>
                                            <![endif]-->
                                            <table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td>
                                                        <h2>Offer 3</h2>
                                                        <p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                </table>
                                            <![endif]-->
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>


                    </table>
                </td>
            </tr>
        </table>
    </body> 
</html>

最佳答案

当您使用 align="left" 时在表格上，它就像在 CSS 中向左浮动。这就是 Gmail 正在做的事情，它使您的文本表格 float ，导致它溢出(弹出)到您的图像表格下方。

如果您希望表格中的文本对齐，请将其放在 <td> 中而不是在这些表中。

更新:

要在 html 电子邮件中响应，请尝试使用 display:block;切换技术:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    @media only screen and (max-width: 600px) { .switch { width:100%; display:block; } }
  </style>
</head>
<body>

  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="switch" width="50%">
         <img alt="" src="http://placehold.it/150x150" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
      </td>
      <td class="switch" width="50%" valign="top" style="padding:30px;">
        Text here...
      </td>
    </tr>
  </table>

</body></html>

这将被 Gmail 忽略，因为它会去除样式标签，保留默认的非响应式布局。

关于android - HTML 电子邮件在 Gmail 应用程序中看起来不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22614437/

文章推荐： ios - 无法看到以编程方式快速添加到 UITabBar 的 Controller

文章推荐： CSS Text wrap 应将 float 元素视为一列

文章推荐： ios - 如何只获取登录用户在 Firebase 中创建的对象？

c++ - 为什么用于字符串比较的 == 运算符相对于任一字符串长度是线性时间(看起来)？
#include #include #include using namespace std::chrono; int main(int arc, char* argv[]) { con
opencv - 看起来 opencv 交换了蓝色和红色 channel ？
我是 opencv 的新手。当我将 sRGB png 提供给它时，我发现以下代码交换了红色和蓝色 channel 。我应该责怪哪个函数，imread 还是 fromarray？最佳答案是的，O
html - 带有日期时间选择器的 Bootstrap 看起来+工作不正常
我正在使用以下代码，它缩小了每一行，并且由于某种原因整个用户界面也丢失了。我该如何解决？
linux - 看起来 Busybox shell 没有删除引号
它是关于以下设置的:Linux 机器、bash、adb、带有 Busybox 的嵌入式 Linux 目标系统。对于目标系统，以下适用: adb shell echo $SHELL /bin/sh ad
android - 我可以删除什么以使空 fragment 看起来 "cleaner"
当我在 Android Studio 上创建一个空 fragment 时，它会生成以下代码: /** * A simple {@link Fragment} subclass. * Activit
meteor - 看起来 Meteor.http.post 工作不正常
我正在尝试从 Meteor 应用程序的服务器端发布用户的 Facebook 提要: result = Meteor.http.call 'POST', "https://graph.faceb
sql - 不同的查询，相同的结果(看起来)，完全不同的性能......为什么？
目前我有两个不同的查询，它们返回完全相同的结果，但是，更改从中过滤结果的参数会使它们以非常不同的方式运行。搜索 cartography 时的结果查询 #1: 22 行/~860 毫秒； SELEC
嵌套结构的 C 问题(看起来 1 个实例是在没有明确定义的情况下定义的)
我已经创建了结构: typedef struct { short s; int i; struct Ss { short s; }; } S;
java - 如何在 Java 中打印 "\t"(看起来)？
我想在 Java 中打印反斜杠 t。但每当我尝试时，它实际上都将它作为\t 运算符。双反斜杠不起作用。我该怎么做。最佳答案例如通过添加另一个反斜杠来转义反斜杠 System.out.println
ios - 看起来 Apple 在 UIActivityViewController 中错误地转换了字符串
我想弄清楚为什么 UIActivityViewController 发送一个稍微转换过的字符串来分享给邮件和微信。这是我的代码: let activityViewController = UIAct
android - sqlite:看起来 moveToNext 不需要 moveToFirst
创建标准 SQLite 游标后，我将使用以下方法遍历条目: while (cursor.moveToNext()) { } 所有行都被正确处理。我读过的所有文档都表明您需要发出 moveToFirst
php - 看起来 SQL 的 WHERE 子句和 JOIN 不能一起工作
我正在尝试创建一个基本论坛，但在 SQL 中仅打印一行时遇到问题。这是我的 PHP: {$title}"; } } else { print "failed to reach post
html - 我的新 div 元素没有出现在网页中。看起来，div 元素隐藏在背景图片后面
我的新 div 元素 ( ) 似乎隐藏在图像后面。我键入的任何内容都显示在图像后面。我想在背景图片之后继续工作。这是我的代码: DISPLAY
javascript - 无法获取我创建的对象的属性。看起来 MongoDB 的 mongoose 有问题
UPD。一行代码解决了问题:.lean() axplanation here 我在 Model.find(...blablabla : [ {"_id":"578763de6e8e0542195ef4
java - 为什么 tomcat 看起来 .root/keystore 让我们加密
我在 Ubuntu 16.04 中安装了 Tomcat 8.0.45。我使用 let's encrypt 生成的证书启用了 HTTPS 连接器。它就像一个魅力。但是今天Tomcat无法启动HTTPS连
visual-studio-2010 - Visual Studio 2010 看起来 "zoomed in"
今天，我在一台全新安装了 Windows 7 Ultimate 64 位的新笔记本电脑上安装了 Visual Studio 2010 Professional。我非常习惯于 Visual Studio
java - 看起来 double 类型变量没有方法。 Java 或 NetBeans 有问题吗？
根据 Oracle，我应该能够将 .intValue() 和 .compareTo() 之类的方法应用于 double ，但是当我编写 dbl.toString( ) 例如，在 NetBeans 中，
javascript - HTML/JavaScript 拖放 - 是否有可能使重影图像 *NOT* 看起来 'washed out' ？
正在为应用程序开发一些拖放功能，虽然可以使用“重影图像”来完成很多事情，将毒品从一个地方转移到另一个地方，但它们看起来总是有点“褪色” - 因此得名鬼影。是否有可能使这些具有与原始颜色相同的深度？谢谢
javascript - 无法获取/帖子/任何内容。看起来 req.params 不起作用
我是这方面的新手，很抱歉犯了一些愚蠢的错误。快乐学习。每当我使用 URL : localhost:3000/posts/whatever 时，我都会收到无法获取错误。在你问之前，是的，那是在我将内容放
swift - 为什么我们可以在闭包的类型注释中使用 "internal argument labels"，而它们(看起来)永远无法访问？
背景这自然是合法的: let closure: (Int, Int) -> () = { print($0 + $1) } closure(1, 2) // 3 鉴于，自进化提案实现以来 SE-01

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

android - HTML 电子邮件在 Gmail 应用程序中看起来不同