Share
Ich werde diesen schnellen Tipp nicht mit dem alten "Heutzutage, in dem die Menschen Ihre Websites auf einer Vielzahl von Geräten betrachten" anspielen, aber es geht ist wahr. Viele mobile Geräte werden die Rufnummern in Ihrem HTML-Code gut erkennen und anklickbar machen, sodass Sie diese Nummer direkt anrufen können - aber nicht immer.
Was passiert, wenn das Mobiltelefon eines Benutzers eine Telefonnummer nicht als "anrufbar" erkennt? Vielleicht wird die Art und Weise, wie Sie die Nummer eingegeben haben, von der Plattform nicht erkannt. Verpasste Gelegenheit!
(Schauen Sie sich die Liste der Muster von Mark Hammond an sind anerkannt für iOS und Android…)
Das ist ganz einfach: Wickeln Sie Ihre Telefonnummern in Anker ein, verwenden Sie jedoch nicht die http * Protokoll (oder was auch immer Sie sonst in einem Anker stecken) verwenden tel: oder tel: //. Auf diese Weise weiß das Gerät, selbst wenn Sie ein nicht erkanntes Muster verwendet haben, was zu tun ist:
+44 (0) 111 - 222 333 44
Nicht unterstützende Browser (z. B. Ihr Desktop) wissen nicht, was Sie mit dem Browser tun sollen tel: Protokoll noch - sofern der Benutzer nicht über eine aktivierte Nebenstelle verfügt, die es Skype ermöglicht, Telefonnummern zu erkennen. Google Chrome ignoriert das Klicken gerne, aber im Moment beginnen andere große Browser zu weinen. Andere Geräte (z. B. das iPad), die keine Telefone sind, erkennen die Nummer und fordern den Benutzer auf, einen Kontakt zu seinem Adressbuch hinzuzufügen. Dies ist auch für Desktop-Browser eine sinnvolle Vorgehensweise.
Als optionales Extra möchten wir dem Benutzer noch deutlicher machen, dass er eine Telefonverbindung betrachtet, indem er jede Verknüpfung gestaltet. Wir verwenden dazu einen Attributwert-Selektor, der nur den :Vor Pseudoelement von Links, die die Zeichenfolge enthalten tel: in ihrem href Attribut:
a [href ^ = "tel:"]: vor content: "\ 260E"; Bildschirmsperre; Rand rechts: 0,5 em;
Das kleine Karat dort ^ Gibt an, dass nach Elementen gesucht wird, deren href-Attribute vorhanden sind Start mit der Zeichenfolge geben wir an. tel: und tel: // werden daher beide hier behandelt. Wir haben ein kleines Unicode-Telefon eingebaut \ 260E;, Daher brauchen wir nicht einmal ein Webfont-Symbol. nett.
Schöner Farbton, eh? 
Accentsconagua
Farbe: Tomate glaub es oder nicht… Wir sind hier fertig, im Namen der Barrierefreiheit, probieren Sie es aus!
