Link nur auf Desktop-Version (nicht mobil) anzeigen

[Theo]

Guten Morgen,

ich möchte einen Link nur dann anzeigen lassen, wenn die Seite auf einem Laptop angezeigt wird, also nicht bei der mobilen Version.

Wie mache ich das?

Vielen Dank!

[MrMurphy]

Gar nicht.

Es gibt in HTML und CSS keine Möglichkeit Endgeräte zu erkennen.

Üblicherweise wird deshalb so ein Verhalten von der Breite des Browserfensters abhängig gemacht, die mit den sogenannten Media Queries abgefragt werden kann.

[Gunnar Bittersmann]

@@Theo

ich möchte einen Link nur dann anzeigen lassen, wenn die Seite auf einem Laptop angezeigt wird, also nicht bei der mobilen Version.

Wie mache ich das?

Am besten gar nicht.

Warum sollten Nutzer mit mobilen Geräten nicht in Genuss des Links kommen?

Oh, die Ironie: Ein Laptop ist auch ein mobiles Gerät.

Ein Tablet auch. Ein Smartphone im Querformat auch.

Anhand der Viewportbreite (media query) wird das also schwer zu unterscheiden sein.

Zumal der Viewport (der Bereich, im dem Webseiten angezeigt werden) auch auf breiten Bildschirmen schmal sein kann: Browser nicht im Vollbildmodus; Sidebars (für Lesezeichen o.ä.).

Und wenn ein Nutzer zoomt, weil sie kleine Schreift nicht lesen kann, unterscheidet sich die Darstellung auf dem Laptop (oder Desktop-PC) nicht von der Darstellung auf einem Smartphone.

Mit anderen Worten (und salopp): Man hat u.U. die „mobile Version“ auf „Desktop-Geräten“ – oder auch die „Desktop-Version“ auf „mobilen Geräten“.

Bliebe noch die Erkennung des Betriebssystems per JavaScript (user agent sniffing) – auch i.a.R. keine gute Idee.

Aber was ist dein Anwendungsfall? Warum denkst du, dass mache Nutzer (welche?) einen bestimmten Link nicht zu sehen bekommen sollten?

Kwakoni Yiquan

[Rolf B]

Hallo Theo,

auf einem Laptop

Was ist mit einem Desktop-PC? Ist Laptop und Desktop für dich synonym?

nicht bei der mobilen Version

Hast du denn eine „mobile“ Version der Seite? Wie unterscheidest du dafür, ob die mobile Version oder die Laptop/Desktop- Version gezeigt wird? Was ist der technische Unterschied zwischen den Versionen? Unterschiedliches HTML? Unterschiedliches CSS? Media-Abfragen?

Oder ist deine eigentliche Frage, wie man überhaupt die Darstellung für „mobile Geräte“ anpasst?

Wobei das, wie Gunnar schon sagte, die falsche Frage ist. Entscheidend ist das Verhältnis von Inhalt zu Fenstergröße bzw. Viewportgröße, wofür man typischerweise @media-Abfragen auf Basis von em Angaben verwendet. Grundlagen dazu findest du im Wiki: Responsives Webdesign

Rolf

[Gunnar Bittersmann]

@@Rolf B

Wobei das, wie Gunnar schon sagte, die falsche Frage ist. Entscheidend ist das Verhältnis von Inhalt zu Fenstergröße bzw. Viewportgröße

Nein!! Hast du mich absichtlich falsch verstanden?

Entscheidend ist die Frage: Warum denkst du, dass mache Nutzer (welche?) einen bestimmten Link nicht zu sehen bekommen sollten?

Solange die nicht geklärt ist, kann man keine sinnvollen technischen Antworten geben.

Grundlagen dazu findest du im Wiki: Responsives Webdesign

Ja, und was steht da? „Unter responsivem Webdesign versteht man, dass das Layout einer Webseite für das Ausgabemedium angepasst wird.“

Das Weglassen eines Links ist aber keine Anpassung des Layouts, sondern eine Änderung des Inhalts der Webseite.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

aus meiner Sicht gibt's hier vor allem die Frage, wie man viewport- und einstellungsabhängig die Entscheidung „Ansicht A“ vs „Ansicht B“ trifft.

Ob der Unterschied in den Ansichten die Sichtbarkeit eines Links ist, ist erstmal zweitrangig. Und ich muss dafür nicht wiederholen, was du schon geschrieben hattest.

Entweder hat Theo das Grundproblem schon gelöst. Dann kann man noch diskutieren, ob er es gut gelöst hat. Und die Lösung dann – sofern sinnvoll – auf den Link anwenden.

Oder er hat es nicht gelöst und kennt vielleicht gar nicht die richtigen Fragen. Dann braucht er dazu erstmal Hilfe. Mein Ansinnen ist, das zu klären.

Rolf

[Gunnar Bittersmann]

@@Rolf B

aus meiner Sicht gibt's hier vor allem die Frage, wie man viewport- und einstellungsabhängig die Entscheidung „Ansicht A“ vs „Ansicht B“ trifft.

Deine Sicht ist verfrüht. Zunächst geht es um die Frage – das sage ich jetzt zum 3. Mal –, für welche Nutzer man die Entscheidung trifft. Viewportabhängig oder geräteabhängig.

Mein Ansinnen ist, das zu klären.

Meins auch. Nur dass ich vorne anfange, nicht unter möglicherweise falschen Annahmen irgendwo in der Mitte.

Kwakoni Yiquan

[Raketenwilli]

Ihr habt beide Gutes und Wahres gesagt (MrMurphy sei auch gelobt!) und die richtigen Fragen gestellt.

Ist wohl an der Zeit, etwas geduldiger auf Theos Antwort zu warten…

[Gunnar Bittersmann]

@@Raketenwilli

Ist wohl an der Zeit, etwas geduldiger auf Theos Antwort zu warten…

Vermutlich braucht man weniger Geduld, wenn man auf Godot wartet.

Theo wird dieselbe Frage noch woanders gestellt haben, wo prompt jemand ohne Rückfrage sowas wie

@media (max-width: 768px) {
  .mobile-hidden { display: none }
}

geantwortet hat. Wobei ich die Benennung der Klasse und den Media-Query in px absichtlich so schlecht gemacht habe.

Kwakoni Yiquan

[Raketenwilli]

Regel für Richter:

Insbesondere die Rechtsmittelerklärung eines rechtsunkundigen Angeklagten ist anhand ihres Gesamtinhalts und unter Berücksichtigung des erstrebten Erfolges auszulegen. (Kammergericht Berlin, Beschl. v. 18.02.2022 – (3) 161 Ss 29/22 (5/22) )

(manche(r) kennt ja mein Hobby)

Womöglich sollte man sich dem anschließen, den mutmaßlich erstrebten Erfolg ergründen - und dann das als „bad“ (schlecht) markierte Beispiel ausbessern.

<!DOCTYPE html>
<html lang="de-DE">
<html>
	<head>
		<meta charset="UTF-8" />
		<style>
			.only-in-small-viewports { display: none; }
			@media ( max-width: 60rem ) {
			  .not-in-small-viewports { display: none; }
			  .only-in-small-viewports { display: initial; }
			}
		</style>
	</head>
	<body>
		<a class="not-in-small-viewports" href="https://example.com">Seite für große Bildschirem. Guggst Du hier.</a>
		<a class="only-in-small-viewports" href="https://example.com/small">Seite für kleine Bildschirme: Guggst Du hier.</a>
	</body>
</html>

Dazu die Erläuterung, dass „mobil“/„nicht mobil“ (technisch gesehen) nicht unterscheidbar ist und dass die Version für kleine Viewports auch dann (alternierend) gezeigt wird, wenn das Browserfenster vorliegend schmaler wird. Dazu den Link zu CSS/Media Queries und der display-Eigenschaft. Vieleicht noch zu rem/rm als Maßangabe.

Der Rest ist hoffentlich durch sprechende Bezeichner erklärt.

Was fehlt noch? Was zum Anschauen/Testen.

[Rolf B]

Hallo Raketenwilli,

display:initial

sollte man, finde ich, anders lösen. Grund: das Element, das man da je nach Viewportgröße sichtbar machen will, könnte eine Flexbox, ein Grid oder sonstwas mit display-Eigenschaft sein.

Deswegen versuche ich immer, wenn ich etwas mit display:none verstecke, es durch das Unwirksammachen des display:none wieder hervor zu holen. Mit Range-Abfragen wird das vereinfacht.

@media (width <= 60em) {
  .only-in-small-viewports { display: none; }
}
@media (width > 60em) {
  .not-in-small-viewports { display: none; }
}

Schöner wäre natürlich

@when media(width <= 60em) {
  .only-in-small-viewports { display: none; }
}
@else {
  .not-in-small-viewports { display: none; }
}

aber CSS Conditionals Level 5 sind noch nicht so weit.

(Selfblog, Spec)

Man muss, wenn man sowas tatsächlich einsetzt, auch überlegen, ob das Zuweisen einer technischen Klasse wie only-in-small-viewports das richtige Vorgehen ist. EIGENTLICH sollen Klassen ja fachliche Sachverhalte darstellen und das CSS den jeweiligen fachlichen Sachverhalt adressieren. Aber das ist immer ein Balanceakt.

Rolf

[Auge]

Hallo

@media (width <= 60em) {
  .only-in-small-viewports { display: none; }
}
@media (width > 60em) {
  .not-in-small-viewports { display: none; }
}

Man erkläre mir den Unterschied zwischen display: none; und display: none;. Das geht doch viel einfacher, ganz ohne Media-Queries, mit display: none;. 😉

Tschö, Auge

[Raketenwilli]

Hallo

@media (width <= 60em) {
  .only-in-small-viewports { display: none; }
}
@media (width > 60em) {
  .not-in-small-viewports { display: none; }
}

(@2024-08-19:„bad“: „aber CSS Conditionals Level 5 sind noch nicht so weit.“)

Man erkläre mir den Unterschied zwischen display: none; und display: none;. Das geht doch viel einfacher, ganz ohne Media-Queries, mit display: none;. 😉

Ja. Das addressiert quasi das Problem mit meinen Kastensätzen, bei deren Wahrnehmumg schnell mal was verloren geht.

Das Gehemnis ist liegt in den schnll zu übersehenden .only-in-small-viewports vers. .not-in-small-viewports, genauer des Teils „only“ und „not“. Per default sind ja alle Elemente, also auch die der genannten Klassen sichtbar und je nach Viewport sollen solche Elemente der jeweils anderen, adressierten Klassen unsichtbar gemacht werden.

[Auge]

Hallo

@media (width <= 60em) {
  .only-in-small-viewports { display: none; }
}
@media (width > 60em) {
  .not-in-small-viewports { display: none; }
}

(@2024-08-19:„Bad“: „aber CSS Conditionals Level 5 sind noch nicht so weit.“)

Man erkläre mir den Unterschied zwischen display: none; und display: none;. Das geht doch viel einfacher, ganz ohne Media-Queries, mit display: none;. 😉

Ja. Das addressiert quasi das Problem mit meinen Kastensätzen, bei deren Wahrnehmumg schnell mal was verloren geht.

Das Gehemnis ist liegt in den schnll zu übersehenden .only-in-small-viewports vers. .not-in-small-viewports, genauer des Teils „only“ und „not“.

Die unterschiedlichen Klassennamen habe ich wohl wahrgenommen. Da es zuvor aber um das anzeigemodellgerechte zurücksetzen von display: none; ging, habe ich erwartet, etwas wie ein umschalten zu sehen.

@media (width <= 60em) {
  .irgendwas { display: none; }
}
@media (width > 60em) {
  .irgendwas { display: grid; }
}

Aber das ginge ja auch mit folgendem..

.irgendwas { display: grid; }

@media (width <= 60em) {
  .irgendwas { display: none; }  
}

Per default sind ja alle Elemente, also auch die der genannten Klassen sichtbar und je nach Viewport sollen solche Elemente der jeweils adressierten Klassen unsichtbar gemacht werden.

Tja, das war dann wohl der für mich unerwartete Themenwechsel von „ein- und ausschalten“ hin zu „mal hier und mal da ausschalten und ausschalten“. Das ist die Sache mit der Erwartung. 😁

Tschö, Auge

[Rolf B]

Hallo Auge,

ich komm nicht ganz bei dir mit.

Aber die Idee ist: das Element wird regulär mit CSS gestyled, als Grid, Flexbox, inline-block oder flow-root. Und wenn's nicht gebraucht wird, macht man es mit display:none weg.

Wird es gebraucht, macht man das display:none weg und es ist wieder in seiner Normaldefinition sichtbar.

Rolf

[Auge]

Hallo

… die Idee ist: das Element wird regulär mit CSS gestyled, als Grid, Flexbox, inline-block oder flow-root. Und wenn's nicht gebraucht wird, macht man es mit display:none weg.

Soweit klar. In deinem letzten Posting fehlte mir zum Verständnis der Teil mit „Grid, Flexbox, inline-block oder flow-root“, also der Anfang. Für mich war das nur weg und weg.

Tschö, Auge

[Rolf B]

Hallo Gunnar Bittersmann,

geräteabhängig

Wie denn? Media queries auf Laptop, Desktop oder Smartwatch gibt's nicht. Du hast doch nur den Viewport, oder den potenziell verlogenen User Agent String.

Rolf

[Camping_RIDER]

Aloha ;)

Ob der Unterschied in den Ansichten die Sichtbarkeit eines Links ist, ist erstmal zweitrangig. Und ich muss dafür nicht wiederholen, was du schon geschrieben hattest.

Unterschied in den Ansichten: okay. Aber: Sichtbarkeit (d.h. Verfügbarkeit) eines Links ist doch kein reiner "Unterschied in den Ansichten", sondern das ist ein inhaltlicher Unterschied - oder nicht?

Natürlich hängt das auch vom Link ab - mir fällt aber kein Usecase für einen Link ein, der nur bei großen Viewports Sinn ergibt.

Gunnar stellt also schon die richtige Grundfrage: was soll der Sinn des Ganzen sein?

Grüße,

RIDER

[Rolf B]

Hallo Janosch,

okay, ein mit display:none versteckter Link ist auch ein inhaltlicher Unterschied. Ich kann es aber mit CSS realisieren.

Es muss ja auch nicht sein, dass der Link weg ist. Vielleicht möchte ich ihn bei kleinem Viewport auch lieber in einem Popup haben statt in einer größeren Funktionsbox. Das kann man mit JavaScript machen, so wie das Wiki in der Artikelnavigation, oder mit CSS. Aber das ist jetzt eine Usecase-Konstruktion und muss nicht der Usecase von Theo sein.

Rolf

[Gunnar Bittersmann]

@@Camping_RIDER

Natürlich hängt das auch vom Link ab - mir fällt aber kein Usecase für einen Link ein, der nur bei großen Viewports Sinn ergibt.

Mir auch nicht.

Mir fällt höchstens einer ein, der nur auf Laptops/Desktops angezeigt werden soll, weil auf Smartphones und Tablets („mobilen Geräten“) die Funktionalität durch eine native App viel besser bereitgestellt wird und man deshalb Nutzer zur Installation derselben bewegen möchte.

Und wie ich schon darlegte: „mobiles Gerät“ ≠ kleiner Viewport.

Kwakoni Yiquan

[Matthias Scharwies]

Servus!

Grundlagen dazu findest du im Wiki: Responsives Webdesign

Ja, und was steht da? „Unter responsivem Webdesign versteht man, dass das Layout einer Webseite für das Ausgabemedium angepasst wird.“

Das Weglassen eines Links ist aber keine Anpassung des Layouts, sondern eine Änderung des Inhalts der Webseite.

Evtl. sollte man in den Wiki-Artikel einen Abschnitt dazu einfügen. Das war ja auch einer der Gründe für das Scheitern von WAP, dass Nutzer keine eingeschränkte Version, sondern die „normale“ Webseite lesen wollen.

Eine ähnliche Stelle gibt's hier: HTML/Tutorials/Layoutkonzepte#RWD_(Responsive_Webdesign)

Hat irgendjemand Zeit und Lust?

Herzliche Grüße

Matthias Scharwies