Question

在向客户提供交易电子邮件（在此示例中为购买确认电子邮件）时，我遇到了不一致/错误的问题。

Gmail不仅会自动链接地址（在这种情况下是客户端＆＃39;动态，本地商店地址），还会将其下方的电话号码的前几位数字映射为地址的一部分。由于区域代码被附加到Google发送到地图服务的地址数据，因此最终会丢弃它链接到的后续地图。

自动链接并不总是以上述方式运行。在某些情况下，它会保留电话号码（格式为：（xxx）xxx-xxxx）。在其他情况下，它只识别要链接的给定地址的一部分。显然，这会导致糟糕的客户体验并需要进行补救，但我的任务是解决这个问题而不使用该功能，因为我们的营销部门希望保留其预期的功能（正确的是良好的可用性）。

关于为什么这可能在代码方面发生或者可能如何手动在标记中指定地址或电话号码的任何想法，以便gmail知道具体需要自动链接的内容是什么？

这是表格之前的Gmail：

＆＃13;

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <tr>
      <td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign="top">Jessica Jones</td>
    </tr>
    <tr>
      <td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign="top">123 Main St</td>
    </tr>
    <tr>
      <td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign="top">Nixa, MO 65714</td>
    </tr>
    <tr>
      <td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none; pointer-events: none;" valign="top">(417) 222-2222</td>
    </tr>
  </tbody>
</table>

＆＃13;

这是违规的HTML表格，在实时测试中，后来gmail有它的方式：

＆＃13;

<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tbody>
    <tr>
      <td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left">Jessica Jones</td>
    </tr>
    <tr>
      <td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left"><a href="https://maps.google.com/?q=123+Main+St+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+Nixa,+MO+65714+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+(417&amp;entry=gmail&amp;source=g">123 Main St</a></td>
    </tr>
    <tr>
      <td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left"><a href="https://maps.google.com/?q=123+Main+St+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+Nixa,+MO+65714+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+(417&amp;entry=gmail&amp;source=g">Nixa, MO 65714</a></td>
    </tr>
    <tr>
      <td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left"><a href="https://maps.google.com/?q=123+Main+St+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+Nixa,+MO+65714+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+(417&amp;entry=gmail&amp;source=g">(417</a>) 222-2222</td>
    </tr>
  </tbody>
</table>

＆＃13;

正如您所看到的，Google出于某种原因连接所有三行以创建其网址。我无法找到可以更好地了解他们可能用于识别地址或电话号码的文档，以便可以控制或避免这些文档。不幸的是，他们公开的2017年9月发行说明不适合开发者。

这就是它在Gmail / Firefox（最新版本）中的显示方式：

In the Inbox

Answer 1

嘿恭喜你关于Stack Overflow的第一个问题！

作为@gwally mentioned，将其放在<head>中可以在某些电子邮件客户端（主要是iOS Mail）中解决此问题。

<head>
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
</head>

之后，我们可以在<head><style>区域添加这样的类：

*[x-apple-data-detectors],  /* iOS */
.unstyle-auto-detected-links *,
.aBn {
    border-bottom: 0 !important;
    cursor: default !important;
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

在父<td>中放置一个类有点过于激进，因为它试图设置太多样式并且最终会弄乱所有文本（而不仅仅是自动链接） - 检测文本）。 包装可能的任何内容，包括<span class="unstyle-auto-detected-links">中的电话号码，邮寄地址或日期，可以正确继承，并且可以在电子邮件中的任何位置使用。

<td>
    <span class="unstyle-auto-detected-links">123 Fake Street, SpringField, OR, 97477 US<br>(123) 456-7890</span>
</td>

重要的是要注意我们无法删除链接，我们只能样式链接文本，因此它不会显示为超链接（它仍然会被点击-able / tap-able）。

我最近在Stack Overflow的电子邮件中使用了这种技术，并且（到目前为止）它运行良好。干杯！

Answer 2

将这两个元标记放在<head>：

中

<head>
  <meta name="format-detection" content="telephone=no" />
  <meta name="format-detection" content="email=no" />
</head>

将其放在样式表中：

    <style>
    *[x-apple-data-detectors], .x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
        border-bottom: 0 !important;
        cursor: default !important;
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }
    </style>

在您的客户数据所在的正文中添加一个类并将href添加到电话号码和电子邮件地址：

<p class="x-gmail-data-detectors">Herman Munster<br />
  1313 Mockingbird Lane<br />
  Hollywood, CA 90210<br />
  <a href="tel:+01-(323) 000-0000">(323) 000-0000<br />
  <a href="mailto:herman@munster.com" target="_blank">herman@munster.com
</p>

这应该做的是消除电子邮件中的蓝色下划线，但仍允许您如果有人点击电话号码或电子邮件地址，它仍然会打开默认的电子邮件客户端或启动电话应用程序让你做打个电话。

这两个资源可以为您提供更多信息：

祝你好运。

如何控制Gmail自动链接识别为地址或电话号码的内容？

2 个答案: