Support » Allgemeine Fragen » Mobile Ansicht auf bestimmten Seiten deaktivieren

  • Hallo zusammen,

    ich verzweifele gerade an einer Frage:
    Ist es möglich, dass die mobile Ansicht, die sich bei (fast) allen Themes automatisch zuschaltet, auf bestimmten Seiten zu unterdrücken? Dass also überall die mobile Ansicht funktioniert, nur auf einer bestimmten Seite nicht?

    Wäre super, wenn jemand helfen kann 🙂

    Viele Grüße und einen schönen Sonntag!

Ansicht von 1 Antwort (von insgesamt 1)
  • Grundsätzlich geht das, praktisch ist es aber aufwändig umzusetzen.

    Die „Responsive“ Anzeige, die sich laufend an die aktuelle Bildschirmgröße anpasst, wird zum größten* Teil mit CSS-Regeln umgesetzt, den so genannten Media-Queries. (* Es gibt auch Themes, die per JavaScript laufend die Bildschirmbreite abfragen und unter bestimmten Umständen Aktionen ausführen.)

    Du findest zu den Media-Queries im Stylesheet deines Themes Code wie

    @media and (max-width: 768px) {
      .container ( width: 95%; )
    }
    @media and (min-width: 769px) {
      .container ( width: 80%; max-width: 1160px; )
    }

    (in diesem Beispiel wird für kleinere Displays einem Inhalts-Container eine Breite von 95% des Bildschirms zugewiesen, für größere Displays wird mit der zweiten Regel die Breite auf 80% heruntergesetzt, darf aber eine Breite von 1160px nicht überschreiten).

    Möchtest du nun für eine Seite nicht, dass die Darstellung angepasst wird, kannst du explizit für diese Seite im Customizer unter Zusätzliches CSS eine eigene CSS-Regel hinzufügen. Dabei kannst du den Umstand nutzen, dass WordPress für jede Webseite eine eigene CSS-Klasse hinzufügt: die Seite mit der ID 42 bekommt im <body>-Tag eine CSS-Klasse page-id-42. Möchtest du nun, dass für die Darstellung auf Displays mit einer Breite unter 768 Pixeln weiterhin eine Darstellung wie bei großen Displays (80% Breite) verwendet wird, lautet die eigene CSS-Regel

    @media and (max-width: 768px) {
      .page-id-42 .container { width: 80%; }
    }

    Soll das für mehrere Seiten gelten, kannst du die CSS-Regel entsprechend erweitern:

    @media and (max-width: 768px) {
      .page-id-42 .container,
      .page-id-815 .container,
      .page-id-4711 .container { 
        width: 80%; 
       }
    }

    Das ist soweit eigentlich nicht übermäßig kompliziert, aber eben aufwändig, weil du in allen verwendeten Stylesheets nach Media-Queries suchen musst, um dann eine eigene CSS-Regel hinzuzufügen, die für die gewünschten Seiten das Layout anpasst.

    Deine Frage hatte mich zuerst ein wenig stutzig gemacht, weil eigentlich alle Welt bemüht ist, Webseiten responsive zu machen – und du möchtest nun für bestimmte Seiten genau das Gegenteil. Ich kenne die Gründe nicht, aber vielleicht solltest du die nochmal hinterfragen und eine andere Lösung ist viel besser geeignet?

Ansicht von 1 Antwort (von insgesamt 1)