Dein Flipbook sieht auf dem Desktop-Monitor scharf aus und schrumpft auf dem Handy zur Briefmarke. Dieser Artikel zeigt, warum Einbettungen mit fester Breite auf Mobilgeräten versagen und wie du sie durch einen responsiven Wrapper, korrekte Viewport-Einstellungen und eine schnelle Testroutine ersetzt.
Du hast den Einbettungscode eingefügt, die Seite auf deinem Laptop angesehen, und das Flipbook sah perfekt aus. Dann hat ein Kollege es auf einem Telefon geöffnet und mir einen Screenshot geschickt, auf dem ein winziges Rechteck in einem Meer aus weißem Freiraum schwebt. Wenn dein eingebettetes Flipbook auf Telefonen zu klein ist, liegt die Ursache fast immer am Einbettungscode selbst, nicht am Flipbook. Die gute Nachricht: Ein responsives Einbetten dauert etwa zehn Minuten, und Flipbooks AI bringt bereits einen mobil responsiven Betrachter mit, der sich gut verhält, sobald der Container darum herum stimmt.
Dieser Artikel erklärt, warum das Schrumpfen passiert, wie du deine Einbettung mit ein paar Zeilen CSS korrigierst und wie du das Ergebnis testest, damit du nie wieder eine kaputte mobile Seite veröffentlichst.
Die meisten kopierten Einbettungsschnipsel sind ein iframe mit fest eingetragenen Zahlen, etwa width="900" height="600". Auf einem Laptop mit 1440 Pixeln ist das in Ordnung. Auf einem Handy mit einem 390 Pixel breiten Viewport passiert eines von zwei Dingen:
Eine dritte, heimtückischere Variante tritt auf, wenn der Seite der Viewport-Meta-Tag fehlt. Das Handy tut dann so, als wäre es ein 980 Pixel breiter Desktop, und verkleinert alles. Dein Flipbook wirkt „klein“, weil die gesamte Seite klein ist.
💡 Schnelle Diagnose: Drehe dein Handy ins Querformat. Sieht das Flipbook plötzlich gut aus, liegt das Problem an einer festen Breite oder einem fehlenden Viewport-Tag, nicht an der Flipbook-Datei.
Die Grundidee responsiven Designs ist einfach: Hör auf, Größen in Pixeln anzugeben, und beschreibe sie stattdessen als Anteil am verfügbaren Platz.
| Ansatz | Beispielwert | Ergebnis auf dem Desktop | Ergebnis auf dem Handy |
|---|---|---|---|
| Feste Pixel | width="900" | Sieht richtig aus | Ragt über oder verkleinert die Seite |
| Prozentuale Breite | width: 100% | Füllt die Spalte | Füllt den Bildschirm |
| Viewport-Einheiten | width: 100vw | Volle Fensterbreite | Kann seitliches Scrollen verursachen, wenn Innenabstände vorhanden sind |
| Seitenverhältnis-Box | aspect-ratio: 16 / 10 | Behält die Form | Behält die Form, skaliert die Höhe |
Die beste Kombination ist eine prozentuale Breite plus ein Seitenverhältnis, denn so bekommst du eine flexible Breite und eine vorhersehbare Höhe.
Achte auf diese Symptome, bevor du irgendeinen Einbettungscode anfasst:
Wenn du eines davon bemerkst, korrigiere zuerst den Viewport. Das dauert eine Zeile.
Öffne deine Seitenvorlage und prüfe den Abschnitt head auf diese Zeile:
<meta name="viewport" content="width=device-width, initial-scale=1">
Ohne sie gehen mobile Browser von einer breiten Desktop-Fläche aus. Plattformen wie WordPress, Webflow und Wix fügen sie in den meisten Designs automatisch hinzu, aber individuelle Vorlagen, alte Landingpages und einige E-Mail-zu-Web-Werkzeuge lassen sie weg.
⚠️ Warnung: Füge dem Tag kein
user-scalable=noodermaximum-scale=1hinzu. Das blockiert das Zoomen per Fingerspreizung, schadet der Barrierefreiheit und kann deine Usability-Werte senken.
Die verlässlichste Lösung ist, das iframe in einen Container zu setzen, der die Größe steuert, und das iframe dann den Container ausfüllen zu lassen. Hier ist das Muster.
Kopiere im Dashboard deines Flipbooks den Einbettungscode. Er sieht ungefähr so aus:
<iframe src="https://your-flipbook-url" width="900" height="600" frameborder="0" allowfullscreen></iframe>
Lass den src genau so, wie er ist. Nur die Größenangaben ändern sich.
Ersetze die festen Zahlen durch einen Wrapper:
<div class="flipbook-embed">
<iframe src="https://your-flipbook-url" title="Product catalog flipbook" allowfullscreen loading="lazy"></iframe>
</div>
.flipbook-embed {
width: 100%;
max-width: 1000px;
margin: 0 auto;
aspect-ratio: 16 / 10;
}
.flipbook-embed iframe {
width: 100%;
height: 100%;
border: 0;
}
Das ist die ganze Lösung für moderne Browser. Der Wrapper nimmt die volle Breite seiner Spalte ein, wächst nie über 1000 Pixel hinaus und behält bei jeder Größe ein 16:10-Format.
Wenn du sehr alte Browser unterstützen musst, denen aspect-ratio fehlt, verwende stattdessen den Padding-Trick:
.flipbook-embed {
position: relative;
width: 100%;
padding-top: 62.5%; /* 10 / 16 */
}
.flipbook-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
Beide Muster erfüllen denselben Zweck. Nimm das erste für sauberen Code, das zweite für maximale Kompatibilität.
Eine 16:10-Box funktioniert auf dem Desktop gut, aber ein hochkant gehaltenes Handy ist hoch und schmal. Ein Flipbook, das als Doppelseite in einer kurzen, breiten Box angezeigt wird, lässt jede Seite auf einem 390 Pixel breiten Bildschirm so klein wie eine Briefmarke werden.
| Gerät | Typische Breite | Beste Darstellung | Empfohlenes Verhältnis |
|---|---|---|---|
| Großer Desktop | 1200 px und mehr | Doppelseite | 16 / 10 |
| Laptop | 1000 bis 1200 px | Doppelseite | 16 / 10 |
| Tablet hochkant | 700 bis 800 px | Einzelseite oder Doppelseite | 4 / 3 |
| Handy hochkant | 360 bis 430 px | Einzelseite | 3 / 4 oder 4 / 5 |
| Handy quer | 640 bis 900 px | Doppelseite | 16 / 10 |
Du kannst die Verhältnisse mit einer Media Query umschalten:
@media (max-width: 600px) {
.flipbook-embed {
aspect-ratio: 3 / 4;
}
}
Auf Handys bekommt das Flipbook jetzt einen hohen Rahmen, der Betrachter zeigt jeweils eine einzelne Seite, und der Text ist ohne Zoomen lesbar.
✅ Best Practice: Gib das Flipbook auf Handys so viel vom Bildschirm wie möglich. Ein Rahmen mit 3:4 und voller Breite ist meist deutlich besser lesbar als eine kleine 16:10-Box.
Selbst eine perfekte Einbettung scheitert, wenn die Spalte darum herum schmal ist. Das ist die zweithäufigste Ursache für winzige Flipbooks.
In den Blockeditoren von WordPress, Elementor, Divi und ähnlichen Seitenbauern steckt eine Einbettung in einer Spalte. Hat die Spalte auf jeder Seite 40 Pixel Innenabstand und auf dem Desktop 33 Prozent Breite, wird sie auf dem Handy möglicherweise nicht auf 100 Prozent verbreitert, sofern du das nicht einstellst.
Prüfe diese Einstellungen:
max-width, die kleiner als der Bildschirm ist.overflow: hidden auf einem übergeordneten Element, das den Rahmen abschneidet.Manche Seitenbauer bereinigen das iframe und entfernen die Wrapper-Klassen. Wenn dein CSS nie greift, verschiebe die Stilregeln in das Panel für eigenes CSS deines Designs oder nutze Inline-Styles am Wrapper:
<div style="width:100%;max-width:1000px;margin:0 auto;aspect-ratio:16/10;">
<iframe src="https://your-flipbook-url" style="width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>
Wenn du dein Flipbook noch nicht veröffentlicht hast, ist hier der saubere Weg. Das Werkzeug Flipbook auf Website einbetten ist genau für diese Situation gebaut, und der Betrachter ist von Anfang an mobil responsiv.
Lege zuerst dein Erscheinungsbild fest, denn spätere Änderungen aktualisieren die eingebettete Version trotzdem automatisch:
Nutzer des Professional-Tarifs erhalten außerdem Auswertungen und Kontaktgewinnung, was zeigt, wie viele Leserinnen und Leser das Flipbook auf mobilen Geräten im Vergleich zum Desktop-Computer öffnen. Die komplette Verteilung der Funktionen steht in den Tarifen. Diese Zahlen zeigen dir schnell, ob sich eine Korrektur lohnt: Sind 70 Prozent deiner Leserinnen und Leser auf dem Telefon, kostet dich eine winzige Einbettung echte Aufmerksamkeit.
Verschiedene Website-Baukästen gehen unterschiedlich mit Einbettungen um. Hier ist eine kurze Übersicht.
| Plattform | Wo einfügen | Typische Falle | Lösung |
|---|---|---|---|
| WordPress | Block „Benutzerdefiniertes HTML“ | Design entfernt den Style-Tag | CSS im Customizer hinzufügen |
| Wix | Widget „Site einbetten“ | Feste Pixelbox | Auf volle Breite strecken, Mobil-Layout separat einstellen |
| Squarespace | Code-Block | Block hat schmale Ränder | Abschnittsabstand auf dem Handy verringern |
| Webflow | Embed-Element | Übergeordnetes Element hat feste Breite | Prozentwert oder max-width verwenden |
| Shopify | Benutzerdefinierter Liquid-Abschnitt | Designcontainer begrenzt die Breite | Abschnitt mit voller Breite verwenden |
| Einfaches HTML | Beliebige Stelle | Viewport-Tag fehlt | Meta-Tag hinzufügen |
Wix und ähnliche Drag-and-drop-Werkzeuge haben ein separates mobiles Layout. Ein Flipbook, das auf der Desktop-Fläche großartig aussieht, kann auf dem Handy eine kleine Box bleiben, bis du den mobilen Editor öffnest und es manuell anpasst. Prüfe immer beide Ansichten.
Ladenbesitzer, die einen Produktkatalog auf einer Produktseite teilen, sollten die Einbettung in einem Bereich über die volle Breite platzieren, statt in der schmalen Spalte mit der Produktbeschreibung. Kunden, die auf dem Telefon stöbern, können ohne Zoomen durch die Seiten blättern.
Wie sich das in der Praxis auswirkt, hilft dir zu entscheiden, welche Korrektur für dich am wichtigsten ist.
Ein Restaurant hat seine Karte in einem Seitenleisten-Widget mit 300 Pixel Breite eingebettet. Auf dem Desktop sah es ordentlich aus, aber auf Telefonen wurde der Text unlesbar. Als die Einbettung in einen Bereich über die volle Breite verschoben und auf mobilen Geräten ein Seitenverhältnis von 3:4 verwendet wurde, war das Problem behoben. Betreiber, die Karten mit dem Restaurantkarten-Flipbook-Ersteller erstellen, stellen oft fest, dass der Großteil der Gäste den Link über einen QR-Code auf dem Telefon öffnet, daher ist die mobile Ansicht die Hauptansicht.
Ein Makler hat eine Immobilienbroschüre in ein zweispaltiges Layout eingebettet. Auf Telefonen wurden die Spalten untereinander angeordnet, aber das iframe behielt seine Breite von 800 Pixeln und ragte über den Rand hinaus. Das Umschließen der Einbettung und das Setzen von max-width: 100% hat das Problem gelöst. Die Ausgabe des Immobilienbroschüren-Ersteller funktioniert bei Besichtigungen auf Tablets gut, weshalb der Makler auch das Seitenverhältnis für Tablets getestet hat.
Ein freiberuflicher Designer hat ein Flipbook aus dem Werkzeug Digitales Portfolio erstellen auf seiner persönlichen Website verwendet. Die Einbettung war in Ordnung, aber der Wrapper-Bereich hatte overflow: hidden und eine feste Höhe von 500 Pixeln, die den Betrachter auf Telefonen abschnitt. Das Entfernen der festen Höhe, sodass das Seitenverhältnis die Größe bestimmt, hat alles wieder hergestellt.
Vertraue nie einer einzigen Vorschau. Nutze diese kurze Routine jedes Mal, wenn du eine Einbettung änderst.
| Prüfpunkt | Bestehensbedingung |
|---|---|
| Horizontales Scrollen | Keines bei irgendeiner Breite |
| Textgröße auf der Seite | Gleich wie auf den anderen Seiten der Website |
| Flipbook-Breite | Passt zur Inhaltsspalte |
| Lesbarkeit der Seite | Fließtext ohne Zoomen lesbar |
| Tippflächen | Vor- und Zurück-Pfeile leicht zu treffen |
| Ladegeschwindigkeit | Betrachter erscheint innerhalb weniger Sekunden |
💡 Profi-Tipp: Füge dem iframe
loading="lazy"hinzu, wenn das Flipbook unterhalb des sichtbaren Bereichs liegt. Die Seite lädt schneller, und Handys mit langsamer Verbindung profitieren am meisten.
Selbst erfahrene Seitenbetreiber machen diese Fehler immer wieder.
Manchmal ist das beste mobile Erlebnis gar keine Einbettung. Ein direkter Link öffnet den Betrachter im ganzen Browserfenster, ohne umgebende Seite, gegen die er ankämpfen muss. Füge unter der Einbettung eine sichtbare Schaltfläche wie „Im Vollbild öffnen“ hinzu, die auf deinen Flipbook-Link zeigt. Leser auf kleinen Bildschirmen tippen sie öfter an, als du erwartest, und auf dem Desktop verlierst du nichts.
Wenn dein Flipbook auch etwas ist, das Leute später lesen möchten, aktiviere Offline-Downloads, damit sie die Datei auf ihrem Handy behalten können.
Ein winziges Flipbook auf dem Handy ist ein Layoutproblem, und Layoutprobleme sind schnell behoben: Füge den Viewport-Tag hinzu, umhülle das iframe, nutze eine prozentuale Breite mit einem Seitenverhältnis, wähle auf Handys ein höheres Verhältnis und teste auf echten Geräten.
Bereit, ein Flipbook zu veröffentlichen, das überall richtig aussieht? Kostenlos loslegen bei Flipbooks AI, durchsuche alle verfügbaren Tools und Vorlagen oder vergleiche die Tarife, um den passenden für deine Website zu finden.
Wähle deine Sprache
