Support » Allgemeine Fragen » Browserfenster Ansichten einstellen

  • Gelöst amilak

    (@amilak)


    Guten Tag,

    ich möchte für meine Webseite optimale Anpassungen vornehmen und habe vor 1 Woche mal etwas gelesen, dass es eine Art Erweiterung gibt, welcher das Brwoserfenster so einstellt, als würde man sich die Webseite z.B. über ein Smartphone, Tablet oder Laptop anschauen.

    Ich finde bei Google nichts, evtl. wegen fehlender Begrifflichkeiten. Mir ist übrigens bekannt, das man z.B. in der Seiten- und Beitrags-Bearbeitungsmodus an sich einstellen kann, aber komischerweise kommt dabei nicht das raus, was ich bearbeitet habe.

    Deshalb benötige ich so eine Art Ansicht als Kontrolle für das Endergebnis 🙂

    Beste Grüße

    • Dieses Thema wurde geändert vor 7 Monaten, 3 Wochen von amilak.
Ansicht von 10 Antworten - 1 bis 10 (von insgesamt 10)
  • Um verschiedene Layouts für Desktop, Tablets und Smartphone anzuschauen gibt es im Customizer unter der linken Menüspalte drei Icons:

    Screenshot Customizer
    Ansicht für Desktop (Pfeil), Tablets und Smartphone (jeweils rechts daneben)

    Außerdem kannst du in den Entwicklertools von Chrome oder Firefox ebenfalls die Darstellung auswählen. Dazu musst du die mobile Ansicht über das Icon [1] aktivieren und dann unter [2] einstellen, welches Gerät emuliert werden soll:

    Screenshot Einstellungen

    (Bei Chrome ist das Icon im Fenster mit den Entwickler-Tools das zweite von links oben.)

    Es gab gibt auch noch externe Webdienste als Simulatoren. Dort wurde neben den Darstellungs-Modi auch Browser, Betriebssystem usw. simuliert.
    Leider ist der einzige, den ich früher gerne besuchte, http://browsershots.org/ nicht mehr richtig funktionsfähig?

    Kennt ihr noch welche Dienste dafür – oder ist es in Zeiten von „mobile first“ und v.a. der Chrome Dominanz eh wurscht, wie die Site in einem andren Umfeld aussieht?

    Hallo,
    früher habe ich auch schon mal Seiten genutzt, die die verschiedenen Browser simulieren. Diese Seiten nutze ich allerdings schon lange nicht mehr, weil über die developer console (F12) (wie bereits Bego geschrieben hat) alle möglichen Geräte simuliert werden können. Dann kann man sehr schön sehen, ob die Webseite korrekt auf den verschiedenen Geräten dargestellt wird und ggfs. direkt bei den entsprechenden CSS-Klassen Anpassungen vornehmen. Diese Änderungen können anschließend kopiert und z. B. unter Design > Customizer > Zusätzliches CSS übernommen werden.
    Viele Grüße
    Hans-Gerd

    Thread-Ersteller amilak

    (@amilak)

    Hallo und sry für die späte Rückmeldung, hatte viel um die Ohren.

    Danke für eure Antworten, sie haben mir weiter geholfen. Insgesamt klappt jetzt auch alles, nur nage ich noch an der Darstellung für Notebooks. Dafür gibt es z.B. im Elementor keine Funktion (oder ich fand sie nicht).

    Ich erstelle Webseiten mit einem 27 Zoll Monitor und die Webseite sieht auch soweit klasse aus. Doch sobald ich den allgegenwärtigen 15.6″ (weit verbreitetes Notebook-Disply) erreicht habe, ist praktisch alles „dahin“.

    Habt ihr diesbezüglich Tipps?

    Darstellung für Notebooks … im Elementor keine Funktion

    In den genannten Entwicklertools der Browser kannst auch eigene Geräte, also eigene Auflösungen hinterlegen.

    ist praktisch alles „dahin“

    Heutzutage erstellt man Websites „mobile first“, also zuerst auf typ. Handy Darstellung und baut dann schrittweise für größere Displays auf.
    Das geht per CSS mit sog. „media query“ Abfragen.

    Doch jedes moderne Theme sollte diese schon mitbringen, sollte responsiv sein. Diese Abfragen und Anweisungen sind in der style.css des Themes. Kopieren, in ein Child Theme und dann experimentieren.

    Hallo @pezi

    Diese Abfragen und Anweisungen sind in der style.css des Themes.

    … da muss ich dich leider korrigieren: die style.css wird nicht in das Child Theme kopiert, sondern es werden nur Änderungen an den CSS-Regeln oder zusätzliche CSS-Regeln geschrieben. Die style.css aus dem Parent Theme wird über die functions.php des Child Themes eingebunden. Mehr Informationen dazu findest du hier
    Viele Grüße
    Hans-Gerd

    Ja, stimmt schon … ich habe mich ein bisschen einfach ausgedrückt.

    Ich erstelle Webseiten mit einem 27 Zoll Monitor und die Webseite sieht auch soweit klasse aus. Doch sobald ich den allgegenwärtigen 15.6″ (weit verbreitetes Notebook-Disply) erreicht habe, ist praktisch alles „dahin“.

    Es ist ja nicht so, dass wir Webseiten für ein iPhone-Modell, ein iPad-Modell und ein MacBook optimieren, sondern die Webseiten sollen auf allen Displays (unabhängig von Marken, aber auch unabhängig von der Auflösung) gescheit aussehen. Interessant sind eigentlich die Breakpoints, also die Frage ab wann z.B. Hamburgermenüs angezeigt werden sollen, mehrspaltige Abschnitte nur noch einspaltig erscheinen, Logos anders positioniert werden usw. Zwischen „nicht mehr Tablet“ und „4K-Monitor“ gibt es dann keine Breakpoints mehr und das Layout sollte sich flexibel der Bildschrimgröße anpassen. (Ich habe das Browserfenster sowieso selten maximiert und die Fenstergröße variiert laufend.) Das kannst du dann testen, indem du das Browserfenster mit der Maus auf- und zuziehst.

    Hier fehlt eindeutig ein [Gefällt mir] Button, @pixolin

    Thread-Ersteller amilak

    (@amilak)

    Danke für die Hinweise und die rege Diskussion 🙂

    Thema hat sich hiermit erledigt.

Ansicht von 10 Antworten - 1 bis 10 (von insgesamt 10)
  • Das Thema „Browserfenster Ansichten einstellen“ ist für neue Antworten geschlossen.