Dein Flipbook wirkt auf Tablets verzerrt, gequetscht oder gestreckt, weil die Seitenverhältnisse deines PDFs nicht zum Darstellungsbereich des Tablets passen. Dieser Artikel erklärt die Ursachen, zeigt praktische Lösungen für deine PDF-Exporteinstellungen und deinen Einbettungscode und verrät dir, wie du Flipbooks veröffentlichst, die auf jedem Tablet-Bildschirm richtig dargestellt werden.
Du hast dein Flipbook auf einem Tablet geöffnet, und statt des klaren, scharfen Layouts, das du gestaltet hast, sieht alles aus, als wäre es durch eine Nudelmaschine gedrückt worden. Die Seiten sind schmal, die Bilder gestreckt und der Text ist schwer zu lesen. Wenn dir das bekannt vorkommt, bist du nicht allein. Das Quetsch-Problem gehört zu den häufigsten Anzeigeproblemen, mit denen digitale Verlage zu tun haben, und fast immer liegt es an einer Abweichung zwischen den Abmessungen deines PDFs und dem Darstellungsbereich des Tablets. Die gute Nachricht: Es lässt sich beheben, und Flipbooks AI macht den Prozess viel einfacher, als es von Hand zu tun.
Bevor du etwas behebst, hilft es zu verstehen, was optisch und technisch genau passiert.
„Gequetscht“ ist die Wahrnehmung der Nutzerin oder des Nutzers. Der technische Begriff lautet Abweichung des Seitenverhältnisses. Dein PDF hat ein eigenes Verhältnis von Breite zu Höhe, zum Beispiel 1:1,41 bei A4-Hochformatseiten. Der Bildschirm deines Tablets hat ein völlig anderes Verhältnis, oft 4:3 beim iPad oder 16:10 bei vielen Android-Tablets. Wenn der Flipbook-Betrachter deine Seiten in den verfügbaren Bildschirmbereich einpasst, ohne das ursprüngliche Verhältnis zu beachten, skaliert er eine Achse unabhängig von der anderen. Das Ergebnis: Alles wirkt zusammengedrückt.
Die meisten Menschen gestalten PDFs im Hochformat, weil Drucklayouts so funktionieren. Tablets werden aber oft im Querformat gehalten, besonders bei Präsentationen oder beim Durchstöbern von Produktkatalogen. Eine Hochformatseite, die in einen Querformat-Bereich gepresst wird, wird horizontal zusammengedrückt, damit sie in die Höhe passt. Deine sorgfältig gestalteten Spalten wirken dann, als gehörten sie auf den schmalen Bildschirm eines Telefons.
⚠️ Das Quetschen ist vorhersehbar, nicht zufällig. Es entspricht direkt dem Unterschied im Seitenverhältnis zwischen deinem PDF und dem Zielbildschirm. Sobald du das Verhältnis kennst, kannst du es systematisch beheben.
Tablets liegen irgendwo zwischen Telefonen und Desktop-Computern. Sie sind groß genug, um Doppelseiten zu zeigen, verhalten sich beim Darstellen eingebetteter Inhalte aber nicht wie Desktop-Browser.
Wenn du ein Flipbook mit einem <iframe>-Tag auf einer Website einbettest, hat ein Desktop-Browser meist genug horizontalen Platz und passt den umgebenden Inhalt an das Einbettungselement an. Tablet-Browser wenden eigene Logik für die Viewport-Skalierung an, die deine vorgesehenen Abmessungen überschreiben kann, wenn sie in festen Pixeln angegeben sind. Ein width="800"-Attribut funktioniert auf einem breiten Desktop gut, bricht aber auf einem Tablet mit schmalerem Viewport. Dann wird das Flipbook vertikal zusammengedrückt, damit alles hineinpasst.
iPads und Android-Tablets gehen unterschiedlich mit Pixeldichte und Viewport-Skalierung um. iPads sind konsistenter, besonders über verschiedene Safari-Versionen hinweg. Android-Tablets verschiedener Hersteller wenden unterschiedliche Skalierungsverfahren an. Ein Flipbook, das auf einem Samsung Galaxy Tab korrekt aussieht, kann auf einem Lenovo Tab gequetscht wirken, weil die Bildschirmauflösungen und die Standardeinstellungen der Browser abweichen.
| Tablet | Bildschirmverhältnis | Übliche Auflösung | Standardausrichtung |
|---|---|---|---|
| iPad Pro 12.9" | 4:3 | 2732 x 2048 | Querformat |
| iPad Air 11" | 4:3 | 2360 x 1640 | Hochformat |
| Samsung Galaxy Tab S9 | 16:10 | 2560 x 1600 | Querformat |
| Lenovo Tab P12 | 16:10 | 2560 x 1600 | Hochformat |
| Google Pixel Tablet | 16:10 | 2560 x 1600 | Querformat |
💡 Gestalte zuerst für das häufigste Tablet-Verhältnis: 4:3 für iPads, 16:10 für Android. Wenn deine Zielgruppe beide nutzt, verwende eine Plattform, die die Skalierung automatisch übernimmt, anstatt zwei getrennte PDFs zu erstellen.
Das Quetsch-Problem geht fast immer auf eine von fünf Ursachen zurück. Finde heraus, welche auf deine Situation zutrifft, dann ist die Lösung klar.
Wenn du dein PDF in einem Standarddruckformat wie A4 (210 x 297 mm) oder US Letter (8,5 x 11 Zoll) erstellt hast, passen diese Maße nicht sauber zu einem Tablet-Bildschirmverhältnis. Der Flipbook-Konverter skaliert die Seite an den Betrachter, aber bei einer deutlichen Abweichung im Verhältnis drückt er den Inhalt zusammen, damit er den verfügbaren Platz ausfüllt.
Das ist die mit Abstand häufigste Ursache. Einbettungscodes mit width="1200" height="900" funktionieren auf breiten Desktops, versagen aber auf Tablets. Der Browser übernimmt die feste Breite, und weil auch die Höhe fest ist, wird der Inhalt in die eingeschränkten Abmessungen gepresst.
Wenn du das Flipbook auf deiner eigenen Website hostest, steuert das <meta name="viewport">-Tag in deinem HTML-<head>, wie Tablet-Browser die Seite skalieren. Ein fehlendes oder falsch konfiguriertes Tag führt dazu, dass der Browser einen Standard-Viewport von 980 px anwendet. Das kann deine Einbettung auf Tablet-Bildschirmen deutlich verzerren.
Das div, das dein eingebettetes Flipbook umschließt, hat womöglich overflow: hidden zusammen mit einer festen Höhe. Rendert das Tablet die Seite in einer anderen Skalierung, schneidet die Höhenbegrenzung das Flipbook ab oder drückt es zusammen, damit es in die Box passt.
Einige ältere PDF-zu-Flipbook-Konverter nutzen feste Rendering-Abläufe, die Tablet-Viewports nicht berücksichtigen. Sie erstellen das Flipbook in einer einheitlichen Standardgröße und erwarten, dass jeder Bildschirm es genau in diesem Maßstab anzeigt.
Die sauberste Lösung beginnt bei deinem Quell-PDF. Wenn die Abmessungen vor der Konvertierung stimmen, hat der Flipbook-Betrachter weniger Arbeit und weniger Gelegenheiten, falsch zu skalieren.
Statt in Druckmaßen zu gestalten, verwende ein bildschirmfreundliches Verhältnis. Für Zielgruppen, die vor allem iPads nutzen, füllt ein Seitenverhältnis von 4:3 wie 1024 x 768 pt den Bildschirm ohne Skalierungsfehler. Für Android-Tablet-Zielgruppen funktioniert ein Verhältnis von 16:10 mit 1280 x 800 px besser. In beiden Fällen startest du mit einem Verhältnis, das sauber zu der Art passt, wie das Tablet es darstellt.
Beim Betrachten auf Tablets schneiden Querformat-PDFs konsistent besser ab. Eine Querformatseite füllt ein waagerecht gehaltenes Tablet von Rand zu Rand, lässt keinen unschönen Leerraum an den Seiten und unterstützt zweispaltige Layouts, die bei normaler Zoomstufe lesbar bleiben, ohne dass die Leserin oder der Leser zoomen und schieben muss.
| Anwendungsfall | Empfohlene PDF-Größe | Verhältnis | Am besten für |
|---|---|---|---|
| Produktkatalog | 1024 x 768 px | 4:3 | Zielgruppen mit iPad als Hauptgerät |
| Magazin-Doppelseite | 1280 x 800 px | 16:10 | Android-Tablets |
| Doppelseite | 2048 x 768 px | ~8:3 | Ansicht mit zwei Seiten im Flipbook |
| Buch im Hochformat | 800 x 1067 px | 3:4 | Tablet im Hochformat gehalten |
| Quadratische Broschüre | 1000 x 1000 px | 1:1 | Gemischte Gerätezielgruppen |
✅ Exportiere dein PDF ohne Schnittmarken, ohne Beschnitt und im RGB-Farbmodus, wenn es für digitale Bildschirme gedacht ist. Druckexport-Einstellungen fügen unsichtbaren Leerraum hinzu, der die Verhältnisberechnung während der Konvertierung verfälscht.
Wenn du dein PDF bereits konvertiert hast und nicht von vorn anfangen willst, kannst du das Quetsch-Problem oft im Einbettungscode lösen, ohne das Originaldokument anzufassen.
Ersetze feste Pixelangaben in deinem <iframe>-Einbettungscode durch Prozentwerte und eine CSS-Deklaration für das aspect-ratio:
<iframe src="your-flipbook-url" width="100%" style="aspect-ratio: 4/3; border: none;"></iframe>
Damit füllt der Browser 100 % der Containerbreite aus und hält die richtige Höhe automatisch ein, unabhängig von Bildschirmgröße oder Ausrichtung des Geräts.
Moderne Browser, darunter Safari auf dem iPad und Chrome auf Android-Tablets, unterstützen die CSS-Eigenschaft aspect-ratio vollständig. Wenn du aspect-ratio: 16/9 oder aspect-ratio: 4/3 zu dem Einbettungs-Container-div hinzufügst, berechnet der Browser die Höhe proportional, und der Quetscheffekt verschwindet komplett.
Browser-Entwicklerwerkzeuge haben einen Gerätesimulationsmodus, aber die Tablet-Simulation in einem Desktop-Browser ersetzt den Test auf echter Hardware nicht vollständig. Rendering-Engines, die Behandlung der Pixeldichte und das Berührungsverhalten unterscheiden sich deutlich. Wenn du nicht auf echter Hardware testen kannst, schicke den direkten Flipbook-Link an jemanden mit dem Zieltablet und bitte um einen Screenshot dessen, was angezeigt wird.
💡 Die meisten Flipbook-Plattformen bieten dir einen teilbaren Link, nicht nur einen Einbettungscode. Schicke diesen direkten Link an dein Tablet für einen schnellen Gerätetest, ohne Website-Code zu ändern oder Entwicklerzugang zu brauchen.
Flipbooks AI löst das Skalierungsproblem auf Tablets automatisch. Der Betrachter basiert auf einer responsiven Rendering-Engine, die sich jeder Bildschirmgröße anpasst, sodass du kein CSS konfigurieren und keine iframe-Attribute manuell ändern musst. So funktioniert es:
Gehe zu Flipbooks AI, erstelle ein Konto oder melde dich an. Klicke auf „Neues Flipbook“ und lade dein PDF hoch. Die Plattform unterstützt große mehrseitige Dokumente und bewahrt deine Schriften, Bilder und Vektorgrafiken während der gesamten Umwandlung in voller Qualität. Für die besten Ergebnisse auf Tablets lade ein PDF hoch, das bereits ein bildschirmfreundliches Verhältnis hat. Wenn dein PDF A4-Hochformat ist, zeigt der Betrachter es trotzdem an, aber ein Querformat-Layout füllt den Tablet-Bildschirm natürlicher und braucht weniger Skalierung im Betrachter.
Nach der Konvertierung zeigt Flipbooks AI eine Live-Vorschau. Nutze die Optionen für die Gerätevorschau, um zu prüfen, wie dein Flipbook in Tablet- und Mobilgrößen aussieht, bevor du es veröffentlichst oder teilst. Der Betrachter nutzt intern eine prozentuale Skalierung, sodass das Flipbook jeden Darstellungsbereich füllt, in dem es geladen wird, ohne manuelles Eingreifen. Du kannst außerdem in den Einstellungen deines Flipbooks das mobil-responsive Design aktivieren. Dadurch wechselt die Standardbedienung von Klicken auf Wischen, was auf dem Tablet natürlicher wirkt.
Flipbooks AI bietet dir zwei Freigabeoptionen: einen direkten Link und einen Einbettungscode. Beide sind vollständig responsiv. Der direkte Link öffnet das Flipbook in einem Vollbild-Betrachter, der sich an jede Geräteausrichtung und Bildschirmgröße anpasst. Der Einbettungscode verwendet standardmäßig prozentuale Abmessungen. Für Website-Integrationen bietet das Tool Flipbook auf der Website einbetten einen fertigen Einbettungsschnipsel mit bereits eingerichteten responsiven Einstellungen.
✅ Nutze den PDF-zu-Flipbook-Konverter für einen unkomplizierten Upload. Er erkennt die Abmessungen deines PDFs automatisch und wendet die passenden Skalierungseinstellungen für eine responsive Darstellung an.
Selbst mit den richtigen Werkzeugen tauchen dieselben Fehler immer wieder in Support-Threads und Nutzerforen auf. Hier ist eine kurze Übersicht der häufigsten Probleme:
| Fehler | Warum es gequetscht wird | Lösung |
|---|---|---|
Feste iframe-width="800" | Ein Tablet-Viewport, der schmaler als 800 px ist, überschreibt die feste Abmessung | width="100%" mit CSS aspect-ratio verwenden |
| A4-Hochformat-PDF auf einem Tablet im Querformat | Das Verhältnis 1,41:1 kollidiert mit einem Bildschirm von 4:3 oder 16:10 | Im Querformat oder mit 4:3-Verhältnis neu gestalten |
overflow:hidden bei einem Container mit fester Höhe | Schneidet Inhalte ab, der Browser drückt das Flipbook zusammen | Feste Höhe entfernen, den prozentualen padding-top-Trick verwenden |
| Kein Viewport-Meta-Tag bei eigenem Hosting | Der Browser wendet einen Standard-Viewport von 980 px an | <meta name="viewport" content="width=device-width, initial-scale=1"> hinzufügen |
| PDF mit Druckbeschnittmarken exportiert | Fügt unsichtbaren Leerraum um die Seiten herum hinzu | Nur mit digitalen Exporteinstellungen für Bildschirme neu exportieren |
| Doppelseiten als einzelne Seiten gespeichert | Jede Doppelseite ist doppelt so breit und wird zum Einpassen zusammengedrückt | Doppelseiten vor der Konvertierung in einzelne Seiten aufteilen |
⚠️ Achte auf Doppelseiten. Viele Print-Designer exportieren PDFs, bei denen zwei Seiten zu einer breiten Doppelseite zusammengefasst sind. Flipbook-Konverter behandeln jede Doppelseite als eine einzelne Seite und versuchen, sie in den Betrachter einzupassen. Das Ergebnis ist extrem gequetscht. Teile Doppelseiten daher immer in einzelne Seiten auf, bevor du konvertierst.
Manchmal reicht eine Korrektur der Abmessungen nicht. Wenn dein PDF ursprünglich für ein bestimmtes Druckformat mit nicht standardmäßigen Rändern, Beschnittbereichen oder Druckmarken in der Seitengeometrie erstellt wurde, muss das Quelldokument selbst korrigiert werden, bevor ein Konverter ein sauberes Ergebnis liefern kann.
Öffne deine ursprüngliche Gestaltungsdatei in InDesign, Illustrator, Affinity Publisher oder Canva und exportiere sie mit diesen Einstellungen neu:
Nach dem Neuexport mit diesen Einstellungen konvertiere das PDF erneut über Flipbooks AI. Der Konverter der Plattform verarbeitet saubere, für Bildschirme exportierte PDFs mit den konsistentesten und genauesten Ergebnissen.
Wenn deine ursprüngliche Gestaltungsdatei nicht verfügbar ist und du nur das PDF hast, kannst du mit dem Dialog „Seiten beschneiden“ in Adobe Acrobat eine CropBox festlegen, die unsichtbaren Leerraum um jede Seite entfernt. So wird das richtige Verhältnis des Inhalts wiederhergestellt, bevor du die Datei durch den Konverter schickst.
Wenn Verlage für Kataloge bei null anfangen, enthalten der Kostenloser digitaler Katalog-Ersteller und der Produktkatalog-Generator von Flipbooks AI vorgefertigte Vorlagen, die bereits für Tablet-Bildschirme bemessen sind. So musst du kein vorhandenes PDF mehr korrigieren.
Das Problem mit dem gequetschten Flipbook lässt sich fast immer lösen. Die Lösung liegt irgendwo in der Kette aus den Abmessungen deines PDFs, deinem Einbettungscode und der Plattform, die die Konvertierung übernimmt. Beginne mit den Abmessungen der Quelldatei, prüfe, ob dein Einbettungscode eine responsive Größe verwendet, und nutze eine Plattform, die das Rendering intelligent übernimmt, ohne manuelle CSS-Arbeit.
Kostenlos starten bei Flipbooks AI und lade noch heute dein erstes PDF hoch. Keine Wasserzeichen, keine Einbettungen mit fester Größe und kein Quetschen auf irgendeinem Bildschirm.
Durchsuche alle Flipbook-Werkzeuge und Vorlagen, um das passende für deinen Anwendungsfall zu finden, von Produktkatalogen bis zu digitalen Portfolios. Oder vergleiche die Preise, um den Tarif zu finden, der zu deinem Veröffentlichungsvolumen passt.
Wähle deine Sprache
