2015-01-19 8 views
21

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

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

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

Antwort

35

Ja, gibt es. Sie können:

Kombination ihnen:

<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"> 
+4

Nur eine Anmerkung - das funktioniert nur auf nativen iOS und einigen Android E-Mail-Clients und nicht allgemein über verschiedene mobile E-Mail-Apps und mobile Geräte. Für diese müssen Sie immer noch die "Hacks" und Workarounds machen. – Gortonington

+2

Sieht aus wie dies für Windows-Handys funktioniert auch https://msdn.microsoft.com/en-us/library/ie/dn265018%28v=vs.85%29.aspx – dunxz

+3

Diese müssen nicht in iOS in dem Mail-App arbeiten 9 auf dem iPhone 6. – crmpicco

0

nicht getestet, aber funktionieren sollte.

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;} 
4

Ich hatte Glück mit:

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

Einzige Lösung, die ich gefunden habe, um zu arbeiten! –

2
<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> 
+2

Ich bin gerade auf dieses Problem mit einer E-Mail gestoßen, an der ich gerade gearbeitet habe. Es stellt sich heraus, dass diese Bemühungen fast nutzlos werden, da es andere Geräte als IOS gibt, die diese Art der Erkennung und Konvertierung durchführen. Ich wünschte, Browser/Geräte hätten die Möglichkeit, diese Art der Erkennung abzuschalten (wenn sie es nicht tun), so dass wir Entwickler nicht viel Zeit damit verbringen, nach einer Lösung zu suchen! –

0

Ich habe gerade entdeckt, dass Format-Erkennung nicht für Outlook.com, Office365 funktioniert usw.

In meinem Fall wollte ich nicht die Auto-Styling-Funktion ODER (von klicken, um eine Adresse anzurufen oder zuzuordnen), also habe ich einige versteckte HTML injiziert, damit es nicht wie eine Adresse aussehen.

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> 

Damit zu Ihrem Stylesheet hinzugefügt:

.hidden { display:none; } 

Dies wurde getestet und arbeitet in den 50 oder so E-Mail-Client-Vorschauen angeboten per Email auf Säure.

HINWEIS: Sie können die Anzeige nicht inline: keine, weil Yahoo Mail das nicht unterstützt und Sie mit sichtbaren Bindestrichen in Ihrer Adresse enden werden. Sie müssen eine Klasse definieren.

Entfernen Display aber halten die Funktionalität

Wenn Sie die Bing Maps Funktionalität Pop-up halten möchten, können Sie das Display anpassen, indem Sie die Klasse „outlookLink“ auf das Element, das die Adresse enthält.Quelle: https://litmus.com/community/discussions/4692-outlook-com-adding-links

So folgt aus:

<td>123 Main Street</td> 

Wird dies:

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

mit folgendem in Ihrem Stylesheet:

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

Outlook.com wickelt, was es bestimmt zu sein Adressen oder Daten (für Kalendereinträge) in einer <Spanne> mit eigenem Styling (blauer Link mit gestrichelter Unterstreichung). Dies ändert das Styling dieser <span> s.