Tablet Mode Vorschau entspricht nicht der Darstellung auf Device

    Liebe Leute,

    ich bin neu hier, ich hoffe, ich bin im richtigen Bereich und das Thema ist nicht schon tausendfach besprochen. Ich habe ein fundamentales Problem mit Elementor: wenn ich im Tablet Mode versuche, mein Design responsiv zu machen, sieht die Vorschau komplett anders aus, als was mein Ipad mir anzeigt, wenn ich die Seite aufrufe.

    Die Umbrüche entsprechen sich nullkommagarnicht.

    Kennt jemand das Problem?

    Und, ganz fundamental: wie bereitet man eigentlich responsive Seiten auf Landscape Mode vor?
    Ich finda dazu nichts.

    Grüße in die Runde

    Peter

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Hat dein Gerät denn die gleiche effektive Pixelbreite wie der Vorschaumodus in Elementor?

    Generell würde ich die Seite immer lieber in der Mobil-Vorschau deines Browsers testen. Das ist in der Regel sehr zuverlässig und dort kannst du z.B. auch die Landscape Auflösungen zuverlässig testen.

    Lieber Daniel, danke für die schnelle Antwort. Ich habe geahnt, dass es mit der Pixelbreite zusammenhängen könnte. Allerdings bin ich da bisher nicht sehr erfolgreich gewesen. Die Breakpoints in Elementor sind für Tablet auf 1025 eingestellt, das scheint auch die Auflösung meines Ipads zu sein.

    "Generell würde ich die Seite immer lieber in der Mobil-Vorschau deines Browsers testen" - damit meinst Du die Funktion unter dem Auge-Icon? Genau die sieht eben total anders aus als auf meinem Ipad. Was aber ja wiederum der Realität näher sein müßte??

    Und wie würde ich dort die Landscape Auflösungen testen? Ich habe bisher nur Portrait Auflösungen gesehen in sämtlichen Vorschauen. Bestimmt liegts an mir, ich mache das erst seit kurzem. Aber gesucht habe ich dann doch schon eine Weile.

    Danke für die Hilfe!

    1025px ist keine gängige Größe für ein Tablet.

    1024px dürfte Landscape beim iPad sein. Portrait vermutlich 768px.

    Zitat von PSaurbier


    "Generell würde ich die Seite immer lieber in der Mobil-Vorschau deines Browsers testen" - damit meinst Du die Funktion unter dem Auge-Icon?

    Kann sein. Das hängt sicher vom Browser ab. Welchen verwendest du denn?

    Beim Firefox und Chrome findest du den Modus in den Entwicklerwerkzeugen (Button ist beim einen oben rechts, beim anderen oben links, aus dem Kopf weiß ich gerade nicht, welcher welcher ist). Im Zweifelsfall kurz googeln, das sollte sich leicht finden lassen.

    Ich weiß nicht, ob wir von den gleichen Dingen schreiben. Ich benutze Safari oder Firefox - und fatalerweise sieht meine Seite sogar unterschiedlich aus, je nachdem in welchem von beiden ich arbeite. Und das bei gleicher Zoomstufe.

    Ich schicke mal zwei Screenshots mit. Der erste: Safari im Tablet Mode. Der zweite: Firefox im Tablet Mode.



    Die Zahl 1025 kommt nicht von mir, und natürlich ist die schräg in der digitalen Welt - als BREAKPOINT ergibt sie aber Sinn, da sie eben die erste über 1024 ist, oder? Ist jedenfalls in meinem Elementor Setup FIX eingestellt und für mich nicht änderbar, zumindest bei den Breakpoints.

    Dazu Screenshot 3 und 4.

    Was nun die Entwicklerwerkzeuge angeht: ich meinte das "Auge" links unten, direkt neben "Speichern". Solltest Du die Funktion "Web-Entwickler" meinen, bei Firefox rechts oben, das führt dann nur zu Optionen, die mich heillos überfordern würden und sicher nicht im Sinne der Funktionalität von Elementor sind.


    Wenn Du mir irgendwie helfen könntest, wäre ich sehr dankbar. Das kostet gerade unendlich viel Zeit, weil ich im Grunde nie das bekomme, was ich angezeigt bekomme - und ständig hin und her hüpfe zwischen den Plattformen, um Ergebnisse durch Raten und Schätzen irgendwann halbwegs hinzukriegen.

    Alle deine Screenshots zeigen die Ansicht im Admin-Bereich, oder?

    Ich meinte eigentlich:
    Frontend bzw. öffentliche Seite öffnen (so wie sie auch deine Besucher sehen). Dort dann Mobilgeräte testen:
    https://developer.mozilla.org/de/docs/Tools/…groessen-testen

    Das ist zwar auch nicht 100% zuverlässig, aber in aller Regel ausreichend genau, um entsprechende Anpassungen vorzunehmen.

    Die 1025px machen natürlich schon Sinn (zumindest wenn 1024px als Breakpoint deiner Seite gewählt sind). Ab 1025px wird dann aber nicht mehr die Tabletansicht gezeigt, sondern eben die Ansicht ab1025px, was in aller Regel eher die kleinste Desktop-Ansicht sein dürfte.

    Ah, das probiere ich mal aus. Öffentliche Seite checke ich natürlich immer, aber dass ich da andere Bildschirmgrössen testen kann, wußte ich nicht. Danke!!

    Hast Du denn irgendeine Idee zu den unterschiedlichen Ergebnissen je nach Browser? Wenn ich nach dem Ipad gehe, ist Safari für Tablet Ansicht komplett unbrauchbar. Obwohl es natürlich via Elementor die gleichen Einstellungen hat wie Firefox, aber die angezeigten Ergebnisse haben mit dem, was auf dem Ipad zu sehen ist, nichts zu tun.

    Der Firefox Tipp hilft schon mal enorm!! Bleibt wirklich die Frage, warum das in Safari alles NICHT stimmt. Aber dann habe ich wohl Klarheit, welchen Browser ich künftig benutze.

    Danke!

    Gibt es denn tatsächlich Abweichungen zwischen der Mobil-Vorschau im Firefox und deinem Safari auf dem iPad?

    Normalerweise sind die meisten Browser-Inkompatibilitaten und Abweichungen heutzutage kein Thema mehr. Wenn es doch welche gibt, liegt es oft an Fehlern im HTML Markup oder CSS-Regeln. Die meisten modernen Browser korrigieren solche Fehler relativ intelligent, aber gerade der Safari neigt dazu, Fehler nicht oder falsch zu "korrigieren", wodurch solche Probleme auftreten können.

    Auch nicht bei identischer Auflösung? Das kann ich mir fast nicht vorstellen. Oder sind auf beiden Geräten unterschiedliche Versionen des Safari installiert?

    Der iOS Safari unterscheidet sich an manchen Stellen auch technisch vom "normalen" Safari, insofern kann das auch trotzdem vorkommen. Da wird es dann aber leider oft etwas komplizierter. Solche Probleme lassen sich dann fast nur über das Remote Debugging im Safari lösen:
    https://www.pc-magazin.de/ratgeber/remot…or-1489283.html
    (Bezieht sich zwar auf eine ältere Version, ist so aber im Prinzip nach wie vor gültig).

    Hm, da muß ich jetzt mit einer Anfänger Frage antworten: Wo stelle ich denn die Auflösung bei Safari ein? Ich setze die Zoomstufe mit cmd-0 auf Neutral, also Zoomstufe 100%- das ist alles, was ich weiß und tue. Aber vielleicht gibt es - ich hab keine gefunden - darüber hinaus Grundeinstellungen zur Auflösung??

    Zitat von PSaurbier

    ...habe ein fundamentales Problem mit Elementor: wenn ich im Tablet Mode versuche, mein Design responsiv zu machen, ...


    Wurden ausschliesslich die vorhandenen Positionierungsmöglichkeiten in Elementor (z.B. How To Place Widgets Side By Side oder Mobile Editing usw.) genutzt oder wurden irgendwo eigene Werte (z.B. Guideline to Flexible Website Layout) oder ggf. ganz eigenes CSS eingegeben? Link zur Seite?

    Ich benutze bisher nur elementor. Da sind mal ein paar Minuswerte bei Margin oder Padding, aber sonst nix Exotisches.

    Die Seite entsteht gerade unter petersaurbier.de

    Danke für den Beistand!!

    Entferne mal testweise alle diese eigenen Minuswerte, sowas ist bei Page Buildern als durchaus exotisch einzustufen.

    Weiterhin deaktivere zum Testen auch temporär mal das Plugin Sina Extension für Elementor und ggf. weitere Erweiterungen für Elementor um Wechselwirkungen auf das Elementor Layout hierdurch auszuschliessen.

    Die Screenshots Safari.jpg (4678 x 2618) und Firefox.jpg (2479 x 1411) haben ungewöhnliche Grössen die nicht übereinstimmen und keine Vergleichbarkeit ermöglichen, der Vorschaubereich auf dem Safari Screenshot ist augenscheinlich im Vergleich viel breiter. Poste 1:1 Pixel Screenshots (ohne Sidebars vom Browser wie im Firefox Screenshot).

    Zitat von PSaurbier

    Hm, da muß ich jetzt mit einer Anfänger Frage antworten: Wo stelle ich denn die Auflösung bei Safari ein?

    Da die Seite responsive ist, hast du identische Darstellungen natürlich auch nur bei identischen Auflösungen.

    Die Auflösung im Safari kannst du am einfachsten durch Skalieren des Browsersfensters "einstellen".

    Ansonsten hat der Safari aber auch einen Modus um verschiedene "Geräte" bzw. Auflösungen direkt zu testen:
    https://thesweetsetup.com/use-responsive-design-mode-safari

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden