Erkennung des iOS-Formats für HTML-E-Mail

Lesezeit: 4 Minuten

Ich habe gerade festgestellt, dass es ein Meta-Tag zum Entfernen der Telefonnummer als Link in HTML unter iOS gibt. Funktioniert das mit HTML-E-Mails?

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

Aber gibt es auch eine für Adresse und Datum? Ich habe schon immer Hacks geschrieben, um das zu überwinden, aber wenn es ein Meta-Tag ist, ist das großartig! Kennt jemand die Syntax für Adresse und Datum?

Benutzer-Avatar
Anonym

Ja da ist. Sie können Folgendes verwenden:

  • Datum: <meta name="format-detection" content="date=no">
  • Adresse: <meta name="format-detection" content="address=no">
  • Email: <meta name="format-detection" content="email=no">

Kombinieren Sie sie:

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

  • Nur eine Anmerkung – dies funktioniert nur wirklich auf nativen iOS- und einigen Android-E-Mail-Clients und nicht universell über verschiedene mobile E-Mail-Apps und mobile Geräte. Für diese müssen Sie immer noch die “Hacks” und Problemumgehungen durchführen.

    – Gortonton

    20. Januar 2015 um 16:14 Uhr


  • Sieht so aus, als ob dies auch für Windows-Telefone funktioniert msdn.microsoft.com/en-us/library/ie/dn265018%28v=vs.85%29.aspx

    – dunxz

    29. April 2015 um 8:57 Uhr

  • Diese funktionieren nicht in der Mail-App in iOS 9 auf dem iPhone 6.

    – crmpicco

    9. Oktober 2015 um 14:37 Uhr

  • @crmpicco Das ist sehr gut möglich. E-Mails entfernen viel Markup. Dazu gehören sinnvollerweise Meta-Tags, da diese für die gesamte Seite relevant sind. Sie müssten wahrscheinlich eine Art Hack verwenden, damit dies (und viele andere Dinge) in E-Mails richtig funktioniert.

    – Anonym

    9. Oktober 2015 um 20:51 Uhr

  • @Anonymous Es ist ziemlich frustrierend wie E-Mail, wenn diese integrierten Funktionen am aufdringlichsten sind, insbesondere auf Mobilgeräten.

    – crmpicco

    12. Oktober 2015 um 10:40 Uhr

Ich hatte Glück mit:

<style>
  a[href^="x-apple-data-detectors:"] {
    color: inherit;
    text-decoration: inherit;
  }
</style>

  • Zum ersten Mal auf ^= in CSS gestoßen, können Sie genau sagen, was es tut?

    – Benutzer471651

    3. Januar 2020 um 15:02 Uhr

  • @ user471651 Wie Regex in js, a[href^="x-apple-data-detectors:"] bedeutet zusammenpassen a Tags, deren href Attributwert beginnt mit x-apple-data-detectors:

    – schrekuu

    21. Juni 2020 um 3:15 Uhr

Ich denke, es ist besser, sie in einem Meta-Tag zu sammeln:

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

<html>
<head>
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="email=no">
    <style type="text/css">
        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }
    </style>
</head>
<body>
    123 Main Street<br/>
    Columbus, Ohio 43215
</body>
</html>

Ich habe gerade festgestellt, dass die Formaterkennung für Outlook.com, Office365 usw. nicht funktioniert.

In meinem Fall wollte ich nicht die Auto-Styling-ODER-Funktionalität (durch Klicken, um eine Adresse anzurufen oder zuzuordnen), also habe ich verstecktes HTML eingefügt, damit es nicht wie eine Adresse aussieht.

Original:

<td>123 Main Street
<br/>Cambridge, MA 02138</td>

Aktualisiert:

<td>123 Main S<i class="hidden">-</i>treet
<br/>Cambridge, M<i class="hidden">-</i>A 02<i class="hidden">-</i>138</td>

Wenn dies zu Ihrem Stylesheet hinzugefügt wurde:

.hidden { display:none; }

Dies wurde getestet und funktioniert in den etwa 50 E-Mail-Client-Vorschauen, die von Email on Acid angeboten werden.

HINWEIS: Sie können display:none nicht inline einfügen, da Yahoo Mail dies nicht unterstützt, und Sie erhalten am Ende sichtbare Bindestriche in Ihrer Adresse. Sie müssen eine Klasse definieren.

Entfernen des Displays, aber Beibehalten der Funktionalität

Wenn Sie die Popup-Funktion von Bing Maps beibehalten möchten, können Sie die Anzeige anpassen, indem Sie die Klasse „outlookLink“ zu dem Element hinzufügen, das die Adresse enthält. Quelle: https://litmus.com/community/discussions/4692-outlook-com-adding-links

Also das:

<td>123 Main Street</td>

Wird das:

<td class="outlookLink">123 Main Street</td>

mit dem folgenden in Ihrem Stylesheet:

.outlookLink span {
      color:#ffffff !important;
      border-bottom-width:0 !important;
      border-bottom-style:none !important;
}

Outlook.com umschließt, was es als Adressen oder Daten (für Kalendereinträge) feststellt, in einem mit seinem eigenen Stil (blauer Link mit gestrichelter Unterstreichung). Dies ändert das Styling dieser s.

Benutzer-Avatar
ysf

Dies ist kein Standard-Meta-Tag, es funktioniert nur für IOS.

Sehen Apple-Entwicklerdokumentation um deine Antwort zu finden

Benutzer-Avatar
Anthony Delgado

ungetestet sollte aber funktionieren.

a[href^=date]{ color:#FFFFFF; text-decoration:none;}
a[href^=telephone]{ color:#FFFFFF; text-decoration:none;}
a[href^=address]{ color:#FFFFFF; text-decoration:none;}
a[href^=email]{ color:#FFFFFF; text-decoration:none;}

1198280cookie-checkErkennung des iOS-Formats für HTML-E-Mail

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy