Share
In diesem kurzen Tipp wird veranschaulicht, wie Telefonnummernverbindungen mit HTML erstellt werden. Die Techniken in diesem Tipp funktionieren sowohl auf Android- als auch auf iPhone-Geräten und können das Erlebnis der Besucher mobiler Websites erheblich verbessern.
Wenn Sie bei jedem Aspekt der mobilen Entwicklung zusätzliche Hilfe benötigen, können Sie einen der Experten von Envato Studio beauftragen. Ansonsten lesen Sie weiter für die Anweisungen.
Standardmäßig erstellt der Gerätebrowser unter iOS und Android auf magische Weise Links aus Text, der als Telefonnummer interpretiert wird. Wenn der Benutzer auf eine dieser Links tippt, wird die Telefonanwendung des Geräts gestartet. Die genauen Telefonnummernmuster, die automatisch in Links umgewandelt werden, sind von Plattform zu Plattform verschieden. Ich habe jedoch einige der erfolgreich aufgelisteten Muster aufgelistet:
Wenn Ihre Site oder App eines der oben genannten geräteübergreifenden Formate verwendet, sollten Ihre Benutzer bereits jetzt in der Lage sein, Anrufe einfach durch Tippen auf den Text zu tätigen.
Das Rezept zum Erstellen eigener Telefonnummernverbindungen ist einfach. Anstelle einer normalen Verbindung, die auf dem HTTP / S-Protokoll oder dem Dateisystem basiert, können Sie das Protokoll "tel:" verwenden. Dies funktioniert genauso wie ein normaler Link, nur anstelle von href Wenn Sie ein Attribut auf eine URL oder eine Datei verweisen, setzen Sie einer Telefonnummer entweder "tel:" oder "tel: //" voran.
Sehen Sie sich die folgenden Beispiele an, um dies in Aktion zu sehen:
Wenn Sie sprechen möchten, rufen Sie mich an!
+1 (555) 555-5555
HINWEIS: Der obige Code sollte auf einem physischen Gerät getestet werden. Es funktioniert nicht mit dem iOS SDK-Emulator.
Der letzte Beispielausschnitt ist besonders erwähnenswert. Viele Webentwickler haben nicht den Luxus, umfangreiche Tests mit mobilen Geräten sowohl auf dem iPhone als auch auf dem Android-Gerät durchzuführen. Daher ist es leicht zu übersehen, dass einige der am Anfang dieses Tipps aufgeführten Telefonformate nicht automatisch erkannt werden alle Geräte.
Da die erkannten Telefonformate von Gerät zu Gerät unterschiedlich sein können, schlage ich vor, Ihre Telefonnummern immer in einem Link mit dem Präfix "tel: //" einzuhüllen. Dadurch wird nicht nur sichergestellt, dass die größte Anzahl von Geräten mit der Telefonanwendung verbunden wird. Dies scheint auch ein expliziterer, zugänglicher und semantischer Ansatz für die Handhabung von Telefonverbindungen zu sein.
Wenn der von Ihnen erstellte Inhalt möglicherweise auf einem Gerät ohne Telefon angezeigt wird, sollten Sie entweder eine serverseitige Sprache verwenden, um die "tel:" - Links nur bei Bedarf hinzuzufügen, oder Sie sollten den Gerätetyp mit JavaScript und überprüfen Fügen Sie der Seite nach und nach die Links hinzu.
Sowohl für Android als auch für das iPhone können Sie die automatische Verknüpfung von Telefonnummern mit dem folgenden Meta-Tag ganz einfach deaktivieren:
Mit diesem Meta-Tag wird die automatische Verknüpfung von Telefonnummern deaktiviert, während Sie weiterhin manuell die Rufnummernverbindungen mithilfe der oben beschriebenen Methode "tel: //" erstellen können.
Das wars für dieses Tutorial! Wenn Sie Ihre mobile Entwicklung weiterentwickeln möchten, sehen Sie sich die riesige Auswahl nützlicher App-Vorlagen auf Envato Market an. Es gibt Tausende zur Auswahl, sowohl für Android als auch für iOS.
Mobile App-Vorlagen auf Envato Market
Accentsconagua
+1 (555) 555-5555