Browserfenster Ansichten einstellen

Gelöst amilak
(@amilak)

vor 4 Jahren, 4 Monaten
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 4 Jahren, 4 Monaten von amilak.

Ansicht von 10 Antworten – 1 bis 10 (von insgesamt 10)

Moderator Bego Mario Garde
(@pixolin)

Moderator (nicht mehr aktiv)

vor 4 Jahren, 4 Monaten

Um verschiedene Layouts für Desktop, Tablets und Smartphone anzuschauen gibt es im Customizer unter der linken Menüspalte drei Icons:

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:

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

Anonymous User 14429768
(@anonymized-14429768)

vor 4 Jahren, 4 Monaten

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?

Moderator Hans-Gerd Gerhards
(@hage)

vor 4 Jahren, 4 Monaten

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-Starter amilak
(@amilak)

vor 4 Jahren, 4 Monaten

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?

Anonymous User 14429768
(@anonymized-14429768)

vor 4 Jahren, 4 Monaten

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.

Moderator Hans-Gerd Gerhards
(@hage)

vor 4 Jahren, 4 Monaten

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

Anonymous User 14429768
(@anonymized-14429768)

vor 4 Jahren, 4 Monaten

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

Moderator Bego Mario Garde
(@pixolin)

Moderator (nicht mehr aktiv)

vor 4 Jahren, 4 Monaten

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.

Anonymous User 14429768
(@anonymized-14429768)

vor 4 Jahren, 4 Monaten

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

Thread-Starter amilak
(@amilak)

vor 4 Jahren, 4 Monaten

Danke für die Hinweise und die rege Diskussion 🙂

Thema hat sich hiermit erledigt.