【问题标题】:Mobile Safari/ iPhone Mail.app HTML design issues: prevent autolinking and styling auto-links (dates, addresses, etc.)移动 Safari/iPhone Mail.app HTML 设计问题:防止自动链接和样式自动链接(日期、地址等)
【发布时间】:2018-03-25 20:20:20
【问题描述】:

我正在尝试设计一个 HTML 电子邮件,它在移动设备上阅读时也应该看起来不错。我最大的问题是 iPhone(iOS 4):它大部分没有记录的“自动链接”功能真的让我很烦。

自动链接似乎出现在

  • 电话号码(这是唯一记录在案的功能,如 explained here
  • 地址
  • 日期

有没有关于如何操作的文档

  1. 禁用日期和地址的自动链接
  2. “更正”通过微格式或类似方式进行的自动链接(因此结果比 iOS 4 的实际效果更好)

非常感谢任何信息、提示或线索,因为那里似乎没有任何信息。

【问题讨论】:

  • 经过一些研究,这种自动检测似乎可以追溯到 1998 年,当时“苹果数据检测器”被指出:bit.ly/hmMsAw

标签: html ios email mobile-safari


【解决方案1】:

这个问题很久以前就在这个帖子How to disable phone number linking in Mobile Safari? 中得到了回答,但要重申给像我这样的所有其他 SEO 访问者......

...根据Safari Web Content Guide for iPhone:

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

【讨论】:

  • 谢谢你的回答,Terri Ann - 我实际上是在寻找一种方法来禁用所有自动链接,而不仅仅是电话号码......
【解决方案2】:

我实际上想出了一个技巧来做到这一点。这很可怕,但它确实有效。您可以在http://commondream.net/post/8933806735/avoiding-data-detectors-in-ioss-mail-app 阅读我的帖子,但一般要点是数据检测器不会链接已经是 HTML 电子邮件中的链接的内容,因此您可以转为:

<span>Tuesday</span>

进入:

<a href="#tuesday" id="tuesday" 
    style="color: #000; text-decoration: none;">Tuesday</a>

这是很糟糕的代码,但它阻止了数据检测器的发生,只有几个缺点,即丑陋的标记和邮件客户端在您单击它时滚动到该特定项目。

综上所述,我认为禁用数据检测器的时间非常有限。我有一封电子邮件按星期几列出天气预报,我觉得没有用户愿意在他们的日历中标记这些信息,但我想说你不应该禁用数据检测器,如果你认为它们实际上可以有用。

【讨论】:

    【解决方案3】:

    对于日期和地址,您可以通过插入例如一个零宽度实体。例如,

    M&#x200b;arch 30, 2013
    

    在 iOS Mail 4.3 和 6.0 上测试。

    【讨论】:

    • 我想知道这是否会增加垃圾邮件检测。它虽然有效。在 iOS 6 之前,我一直使用旧式的 body 属性,例如&lt;body link="#88888" alink="#888888" vlink="#888888" text="#555555"&gt;
    【解决方案4】:
    <a href="#" style="color: #666666; text-decoration: none;pointer-events: none;">Boca Raton, FL 33487</a>
    

    将颜色更改为与您的文本匹配的任何颜色,文本装饰删除下划线,指针事件阻止它像浏览器中的链接一样被查看

    这非常适合 ios 和浏览器上的 HTML 电子邮件。

    【讨论】:

    • 这对我有用,只需要更改颜色#000000
    • 这可能是最好的解决方案,它至少适用于 iOS 7。
    • 这是最好的答案。由于pointer-events: none;,在 iOS 中单击它不会执行任何操作
    【解决方案5】:

    我们也遇到了这个问题。为了在 iOS 上禁用 Safari 中的地址格式检测,我们将地址包装在一个 &lt;a&gt; 标记中,不带 href 属性,并使用 style 属性定义我们想要的颜色:

    <a style="color: #c0c0c0;">Square, Inc., 901 Mission Street, San Francisco, CA 94103</a>
    

    结果在 iOS Safari 中仍然是可点击的,但会以我们想要的颜色呈现。

    在其他浏览器中,该链接不可点击,并且由于内联样式颜色与现有文本相同,因此它看起来与周围的文本没有任何不同。

    【讨论】:

    • iOS 邮件应用仍然会超链接。
    • @chrisfinne - 是的,但是你可以随意设置它的样式。如果要删除下划线,请添加style="text-decoration: none"
    • @BeauSmith 正如 Chris 所指出的,这不适用于 HTML 电子邮件。至少在 iOS 6.1 Mail 中,它仍然将其样式设置为蓝色下划线链接,覆盖元素样式。但是,我们成功地破坏了日期识别,至少通过插入例如一个零宽度实体。例如,M​arch 30, 2013
    • 这在 iOS 8 中不起作用,除非我为地址添加 href="#"
    【解决方案6】:

    我认为您不能像使用电话号码那样禁用地址和日期的自动链接,至少它不在 Apple 的官方文档 Safari HTML Reference 中。

    试图阻止自动链接的一个技巧是在内容中使用一些冗余标签。例如,您可以不写出&lt;div&gt;+61 3 777 8888&lt;/div&gt;,而是写出&lt;div&gt;&lt;foo&gt;+61 3 777&lt;/foo&gt; 8888&lt;/div&gt; 之类的东西。它不是很优雅,但它可能会实现你想要的。

    【讨论】:

    • @MightyE,z3cko 已经知道禁用电话检测;他/她在询问如何“禁用日期和地址的自动链接”。 :)
    • @William Niu:正确,我想删除所有其他自动链接,因为它会产生错误的输出...
    【解决方案7】:

    如果你能侥幸成功,用单引号括起来会禁用自动链接。这也适用于不能使用 HTML 技巧的主题行。

    【讨论】:

      【解决方案8】:

      我将此解决方案用于需要设置样式的自动链接

      <span class="applelinksWhite">or call 1-666-12<span>3-456</span>7</span>
      

      然后,我将它添加到我的样式标签中。我在身体中使用它,因为一些客户将其从头部剥离。

      .applelinksWhite a {color:#ffffff !important; text-decoration:none;}
      

      因此,applelinks span 涵盖了 ios 设备的自动链接,我在文本字符串的中间添加了一个基本 span,以摆脱 gmail 等其他客户端。已在 Litmus 中测试并全面工作。

      这适用于任何类型的自动链接。

      【讨论】:

        【解决方案9】:

        创建不执行任何操作的 &lt;a&gt; 链接标签似乎是日期和地址的最佳选择:

        &lt;a href="javascript: void(0)" style="cursor:text; text-decoration:none; color:#333333;"&gt;July 18, 2014&lt;/a&gt;

        你可以使用

        &lt;meta name="format-detection" content="telephone=no"&gt;

        对于电话号码,它将禁用所有人的电话链接;这可能不是您想要做的。

        如果您不使用此元标记,您可以使用 CSS 设置样式以根据需要更改链接颜色。并将上面的代码(&lt;a&gt; 标签)用于您不想链接的电话号码。

        【讨论】:

          猜你喜欢
          • 2019-01-15
          • 1970-01-01
          • 2012-12-28
          • 2015-09-11
          • 2020-04-22
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多