Unterschied Media Query und mobiles Layout

Hallo, ich steh da etwas auf dem Schlauch: ich habe meine Site so eingerichtet, dass per mobilem Layout auf den Unterseiten ein Breadcrumb angezeigt wird, im Standard-Layout nicht. Zusätzlich habe ich durch media queries realisiert, dass bei schmalen viewports (Smartphone im Hochformat) ein Menü-Button angezeigt wird, bei breiteren (Smartphone im Querformat) das horizontale Menü, das auch auf dem PC angezeigt wird.

Nun ist es aber wohl so, dass beides (Media Queue und Erkennung mobiler Geräte) nichts miteinander zu tun hat. Deshalb erscheint auf dem Smartphone im Querformat das horizontale Menü plus dem Breadcrumb. Weiß jemand eine Lösung, wie ich die Zuordnung des mobilen Layouts auf schmale Screens beschränken kann? Der wenig elegante Workaround wäre natürlich, auch im Smartphone-Querformat den Menü-Button anzuzeigen. Oder sich an dem überflüssigen Breadcrumb nicht zu stören....

Meine Site ist: www.denkmalverein-bonn-aktuell.de (wird in Kürze umbenannt in www.denkmalverein-bonn.de).

Das sind einfach zwei verschiedene Techniken.

Mit Media Queries machst du bestimmte CSS-Eigenschaften von der verfügbaren Anzeigebreite abhängig. Das funktioniert auch in dem Desktop wenn du das Browserfenster ganz klein machst.
Nachteil: es wird erst im Browser ausgewertet.

Die Erkennung von Mobilgeräten passiert über Auswertung der Browserkennung und evtl. noch andere Informationen, die der Browser an den Server sendet.
Vorteil: der Server kann bereits nicht benötigte Informationen ausfiltern, die dann nicht zum trafic beitragen
Nachteil: mit der stetigen Weiterentwicklung der mobilen Endgeräte unterliegt die Erkennung einer gewissen Unsicherheit

Wenn es nur um so kleine Änderungen wie den Breadcrumb geht, dann würde ich den per Media Query ggf. ausblenden.
Aus meiner Sicht sind Mobil-Layouts dann angebracht, wenn für Mobilgeräte tatsächlich ein anderes Layout - vielleicht sogat mit anderen Inhalten - gebraucht wird.

Hallo, ja, ich weiß nur nicht, wie ich den Breadcrumb ausblenden kann. Er ist als Modul in dem Mobil-Seitenlayout eingebunden. Wenn ich die css für die Darstellung des Breadcrumbs auf kleinere Bildschirmgröße beschränke, wird der Breadcrumb bei mittleren Display ohne individuelle Formatierung ausgegeben. Hier zu eine Idee?

Dann gib doch in deinem CSS für kleinere Bildschirmgröße einfach ein

Code:

---

.mod_breadcrumb {
  display: none;
}

---

Danke, das hat tatsächlich geklappt! Ich meine, ich hätte das schonmal erfolglos ausprobiert. Vermutlich habe ich mich da aber verschrieben oder was auch immer. Jetzt geht's jedenfalls.