Für Smartphones klickbare Telefonnummern auf Webseiten einbauen

Widget Quelltext mit folgendem Inhalt:

<a href="tel:+49123456789">TEL: 01234/56789</a>

Gibt es dazu auch wieder eine Möglichkeit, den Link bei Desktop "nicht klickbar" zu machen?

Eventuell wieder über eine "Max. Breite des genutzten Bildschirms"?

Falls dieser Link auf Desktop angeklickt wird passiert sonst folgendes:

Ja, schau mal auf meine Seite https://www.zella.de/.

Wenn du den Bildschirm verkleinerst wird die Nummer ausgeblendet und ein klickbarer Button eingeblendet.

Folgenden Code verwende ich.

CSS

.fon {
position: absolute;
z-index:6100;
top:65px;
left:30px;
font-size:17px;
color: #006600;
font-weight: 900;
text-shadow: 1px 1px 1px white;
}
@media (max-width: 979px) {
.fon {
display: none;
}}

.fon-mobil {
position: absolute;
z-index:6100;
top:5px;
left:20px;
width: 35px;
height: 35px;
}
@media (min-width: 979px) {
.fon-mobil {
display: none;
}}
@media (max-width: 550px) {
.fon-mobil {
top:5px;
left:10px;
width: 30px;
height: 30px;
}}

Quelltext

<div class="fon">☏ 036924/41976</div>
<div class="fon-mobil"><a href="tel:+493692441976"><img src="https://www.zella.de/bilder/social4/fon.png" alt="telefon" /></a></div>

Hallo Mario

Vielen Dank, deine Codes sind immer klasse.

Aber mir würde es hier ja schon reichen, wenn ich die Telefonnummer auf dem Handy klickbar habe (geht mit dem ersten Code), aber auf dem Desktop nicht. Dies ohne spezielle Positionierung oder Button.

Ich habe meine Adresse mit Telefonnummer derzeit ganz einfach unterhalb jeder Seite (mit Vererbung).

Da dann den Teil der Positionierung und Button weg lassen.

Einstellungen > CSS

<style>
@media (max-width: 979px) {
.fon {
display: none;
}}
@media (min-width: 979px) {
.fon-mobil {
display: none;
}}
</style>

Widget > Quelltext

<div class="fon">☏ 01234/56789</div>
<a class="fon-mobil" href="tel:+49123456789">☏ 01234/56789</a>

Hallo Mario

Danke, hat geklappt, hatte zwar ein wenig Mühe, vermutlich wegen den Formatierungen des Textes, aber jetzt funktioniert es wie gewünscht!

http://www.erma.ch