Il tuo flipbook appare distorto, schiacciato o allungato sui tablet per un conflitto di proporzioni tra le dimensioni del tuo PDF e la finestra di visualizzazione del tablet. Questo articolo analizza le cause principali, spiega come correggere le impostazioni di esportazione del PDF e il codice di incorporamento, e ti mostra come pubblicare flipbook che si vedono correttamente su ogni schermo di tablet.
Hai aperto il tuo flipbook su un tablet e, al posto dell’impaginazione pulita e nitida che avevi progettato, ti ritrovi con qualcosa che sembra passato in una macchina per la pasta. Le pagine sono strette, le immagini sono allungate e il testo è difficile da leggere. Se ti suona familiare, non sei il solo. Il problema dello schiacciamento è uno dei problemi di visualizzazione più comuni per chi pubblica contenuti digitali, e quasi sempre dipende da una mancata corrispondenza tra le dimensioni del tuo PDF e la finestra di visualizzazione del tablet. La buona notizia: si può risolvere, e Flipbooks AI rende il processo molto più semplice che farlo a mano.
Prima di correggere qualsiasi cosa, conviene capire esattamente cosa succede a livello visivo e tecnico.
“Schiacciato” è l’effetto che vedi. Il termine tecnico è mancata corrispondenza delle proporzioni. Il tuo PDF ha un rapporto naturale tra larghezza e altezza, per esempio 1:1,41 per le pagine A4 in verticale. Lo schermo del tuo tablet ha un rapporto completamente diverso, spesso 4:3 su un iPad o 16:10 su molti tablet Android. Quando il visualizzatore del flipbook cerca di far entrare le pagine nello spazio disponibile senza rispettare il rapporto originale, scala un asse indipendentemente dall’altro. Il risultato: tutto sembra compresso.
La maggior parte delle persone progetta i PDF in verticale, perché è così che funzionano le impaginazioni per la stampa. Ma i tablet spesso si tengono in orizzontale, soprattutto durante le presentazioni o quando si sfogliano cataloghi di prodotti. Una pagina verticale inserita in una finestra orizzontale viene compressa in larghezza per adattarsi all’altezza, e le colonne che hai progettato con cura sembrano fatte per lo schermo stretto di un telefono.
⚠️ Lo schiacciamento è prevedibile, non casuale. Dipende direttamente dalla differenza di proporzioni tra il tuo PDF e lo schermo di destinazione. Una volta conosciuto il rapporto, puoi correggerlo in modo sistematico.
I tablet stanno in una posizione scomoda tra telefoni e computer desktop. Sono abbastanza grandi da mostrare doppie pagine, ma non si comportano come i browser desktop quando si tratta di visualizzare contenuti incorporati.
Quando incorpori un flipbook con un tag <iframe> su un sito web, un browser desktop di solito ha molto spazio in orizzontale e riadatta il contenuto intorno all’incorporamento. I browser dei tablet applicano una propria logica di scalatura della finestra, che può sovrascrivere le dimensioni previste se sono impostate in pixel fissi. Un attributo width="800" funziona bene su un desktop ampio ma non regge su un tablet con una finestra più stretta, e fa comprimere il flipbook in verticale perché tutto stia nello spazio disponibile.
iPad e tablet Android gestiscono in modo diverso la densità dei pixel e la scalatura della finestra. Gli iPad sono più coerenti, soprattutto tra le versioni di Safari. I tablet Android di produttori diversi applicano comportamenti di scalatura diversi. Un flipbook che appare corretto su un Samsung Galaxy Tab può risultare schiacciato su un Lenovo Tab a causa di risoluzioni dello schermo e impostazioni predefinite del browser diverse.
| Tablet | Proporzioni dello schermo | Risoluzione comune | Orientamento predefinito |
|---|---|---|---|
| iPad Pro 12.9" | 4:3 | 2732 x 2048 | Orizzontale |
| iPad Air 11" | 4:3 | 2360 x 1640 | Verticale |
| Samsung Galaxy Tab S9 | 16:10 | 2560 x 1600 | Orizzontale |
| Lenovo Tab P12 | 16:10 | 2560 x 1600 | Verticale |
| Google Pixel Tablet | 16:10 | 2560 x 1600 | Orizzontale |
💡 Progetta prima per il rapporto più diffuso sui tablet: 4:3 per gli iPad, 16:10 per Android. Se il tuo pubblico usa entrambi, scegli una piattaforma che gestisca la scalatura in automatico invece di creare due PDF separati.
Il problema dello schiacciamento deriva quasi sempre da una di cinque situazioni. Individua quella che ti riguarda, e la soluzione diventa chiara.
Se hai creato il PDF con un formato da stampa standard come A4 (210 x 297 mm) o US Letter (8,5 x 11 pollici), queste dimensioni non corrispondono in modo pulito a nessun rapporto di schermo di tablet. Il convertitore del flipbook ridimensiona la pagina per adattarla al visualizzatore, ma quando la differenza di proporzioni è significativa, comprime il contenuto per riempire lo spazio disponibile.
Questa è la causa più frequente in assoluto. I codici di incorporamento con width="1200" height="900" funzionano bene sui desktop ampi ma non sui tablet. Il browser applica la larghezza fissa e, poiché anche l’altezza è fissa, il contenuto viene compresso per entrare nelle dimensioni limitate.
Se ospiti il flipbook sul tuo sito, il tag <meta name="viewport"> nel tuo <head> HTML controlla il modo in cui i browser dei tablet scalano la pagina. Un tag mancante o configurato male fa sì che il browser applichi un viewport virtuale predefinito di 980px, che può deformare parecchio l’incorporamento sugli schermi dei tablet.
Il div che racchiude il flipbook incorporato potrebbe avere overflow: hidden combinato con un’altezza fissa. Quando il tablet visualizza la pagina a una scala diversa, il vincolo di altezza ritaglia o comprime il flipbook per farlo stare nel riquadro.
Alcuni convertitori da PDF a flipbook più vecchi usano pipeline di rendering fisse che non tengono conto dei viewport dei tablet. Generano il flipbook con una dimensione canonica unica e si aspettano che ogni schermo lo mostri esattamente a quella scala.
La soluzione più pulita parte dal PDF di partenza. Impostare le dimensioni giuste prima della conversione significa che il visualizzatore del flipbook ha meno lavoro da fare e meno occasioni per scalare male.
Invece di progettare con dimensioni da stampa, usa un rapporto pensato per lo schermo. Per un pubblico che usa soprattutto iPad, un rapporto di pagina 4:3 come 1024 x 768 pt riempie lo schermo senza artefatti di scalatura. Per un pubblico di tablet Android, un rapporto 16:10 a 1280 x 800 px funziona meglio. In entrambi i casi parti da un rapporto che si adatta in modo pulito a come il tablet lo mostrerà.
Per la visualizzazione su tablet, i PDF orizzontali funzionano sempre meglio. Una pagina orizzontale riempie da un bordo all’altro un tablet tenuto in orizzontale, non lascia spazi bianchi scomodi ai lati e supporta impaginazioni a due colonne che restano leggibili con lo zoom normale, senza che il lettore debba pizzicare e scorrere.
| Caso d’uso | PDF consigliato | Rapporto | Ideale per |
|---|---|---|---|
| Catalogo prodotti | 1024 x 768 px | 4:3 | Pubblico soprattutto iPad |
| Doppia pagina di rivista | 1280 x 800 px | 16:10 | Tablet Android |
| Pagina doppia | 2048 x 768 px | ~8:3 | Visualizzazione a due pagine |
| Libro in verticale | 800 x 1067 px | 3:4 | Tablet tenuto in verticale |
| Brochure quadrata | 1000 x 1000 px | 1:1 | Pubblico con dispositivi misti |
✅ Esporta il PDF senza segni di taglio, senza abbondanze e in modalità colore RGB quando è destinato agli schermi digitali. Le impostazioni di esportazione per la stampa aggiungono spazi bianchi invisibili che alterano i calcoli del rapporto durante la conversione.
Se hai già convertito il PDF e non vuoi ricominciare da capo, il codice di incorporamento è spesso il punto in cui puoi risolvere il problema dello schiacciamento senza toccare il documento originale.
Sostituisci tutte le dimensioni fisse in pixel nel tuo incorporamento <iframe> con valori in percentuale e una dichiarazione CSS aspect-ratio:
<iframe src="your-flipbook-url" width="100%" style="aspect-ratio: 4/3; border: none;"></iframe>
Questo dice al browser di occupare il 100% della larghezza del contenitore e di mantenere automaticamente l’altezza corretta, indipendentemente dalle dimensioni dello schermo o dall’orientamento del dispositivo.
I browser moderni, compresi Safari su iPad e Chrome sui tablet Android, supportano pienamente la proprietà CSS aspect-ratio. Aggiungere aspect-ratio: 16/9 o aspect-ratio: 4/3 al div contenitore dell’incorporamento obbliga il browser a calcolare l’altezza in proporzione, eliminando del tutto l’effetto di compressione.
Gli strumenti per sviluppatori del browser hanno una modalità di emulazione dei dispositivi, ma l’emulazione di un tablet in un browser desktop non sostituisce del tutto il test su hardware reale. I motori di rendering, la gestione della densità dei pixel e il comportamento al tocco sono tutti sensibilmente diversi. Se non puoi testare su hardware reale, condividi il link diretto del flipbook con qualcuno che ha il tablet di riferimento e chiedigli di fare uno screenshot di quello che vede.
💡 La maggior parte delle piattaforme per flipbook ti offre un link di condivisione, non solo un codice di incorporamento. Invia quel link diretto al tuo tablet per un test rapido sul dispositivo, senza modificare il codice del sito e senza bisogno di accesso da sviluppatore.
Flipbooks AI gestisce automaticamente il problema della scalatura sui tablet. Il suo visualizzatore è basato su un motore di rendering adattivo che si adatta a qualsiasi dimensione di schermo, quindi non devi configurare CSS né modificare a mano gli attributi degli iframe. Ecco come usarlo:
Vai su Flipbooks AI e crea un account oppure accedi. Clicca su “Nuovo flipbook” e carica il tuo PDF. La piattaforma supporta documenti lunghi con molte pagine e conserva font, immagini e grafica vettoriale a piena qualità durante tutta la conversione. Per ottenere i risultati migliori su tablet, carica un PDF già in un rapporto pensato per lo schermo. Se il tuo PDF è un A4 in verticale, il visualizzatore lo mostrerà comunque, ma un’impaginazione orizzontale riempie lo schermo del tablet in modo più naturale e richiede meno scalatura lato visualizzatore.
Una volta convertito, Flipbooks AI mostra un’anteprima dal vivo. Usa le opzioni di anteprima per dispositivi per controllare come appare il flipbook alle dimensioni di tablet e telefono prima di pubblicarlo o condividerlo. Il visualizzatore usa internamente una scalatura in percentuale, quindi il flipbook riempie qualsiasi finestra in cui viene caricato, senza interventi manuali. Puoi anche attivare l’opzione di design adattivo per i dispositivi mobili nelle impostazioni del flipbook, che passa l’interazione predefinita da basata sul clic a basata sullo scorrimento, per un’esperienza più naturale su tablet.
Flipbooks AI ti offre due opzioni di condivisione: un link diretto e un codice di incorporamento. Entrambi sono pienamente adattivi. Il link diretto apre il flipbook in un visualizzatore a schermo intero che si adatta a qualsiasi orientamento del dispositivo e a qualsiasi dimensione di schermo. Il codice di incorporamento usa per impostazione predefinita dimensioni in percentuale. Per le integrazioni con il sito web, lo strumento Incorporare il flipbook sul sito web fornisce uno snippet di incorporamento già pronto, con le impostazioni adattive già configurate.
✅ Usa il Convertitore da PDF a flipbook per un caricamento semplice e veloce. Rileva automaticamente le dimensioni del tuo PDF e applica le impostazioni di scalatura adatte alla visualizzazione adattiva.
Anche con gli strumenti giusti, gli stessi errori continuano a comparire nelle discussioni di supporto e nei forum degli utenti. Ecco un riepilogo rapido dei problemi più frequenti:
| Errore | Perché si schiaccia | Soluzione |
|---|---|---|
width="800" con iframe a dimensioni fisse | Il viewport del tablet, più stretto di 800px, sovrascrive la dimensione fissa | Usa width="100%" con CSS aspect-ratio |
| PDF A4 in verticale su tablet in orizzontale | Il rapporto 1,41:1 non corrisponde allo schermo 4:3 o 16:10 | Riprogetta in orizzontale o con rapporto 4:3 |
overflow:hidden su un contenitore ad altezza fissa | Ritaglia il contenuto, il browser comprime il flipbook per farlo stare | Rimuovi l’altezza fissa, usa il trucco della percentuale padding-top |
| Nessun meta tag viewport su hosting personalizzato | Il browser applica un viewport virtuale predefinito di 980px | Aggiungi <meta name="viewport" content="width=device-width, initial-scale=1"> |
| PDF esportato con segni di stampa per l’abbondanza | Aggiunge spazi bianchi invisibili intorno alle pagine | Riesporta solo con impostazioni di esportazione digitali o per schermo |
| Pagine doppie salvate come pagine singole | Ogni doppia pagina è due volte più larga e si schiaccia per entrare nel visualizzatore | Dividi le doppie pagine in pagine singole prima di convertire |
⚠️ Attenzione alle doppie pagine. Molti grafici per la stampa esportano PDF con due pagine unite in un’unica doppia pagina larga. I convertitori di flipbook trattano ogni doppia pagina come una pagina singola e cercano di farla entrare nel visualizzatore, con un risultato estremamente schiacciato. Dividi sempre le doppie pagine in pagine singole prima di convertire.
A volte il problema dello schiacciamento va oltre una semplice modifica delle dimensioni. Se il tuo PDF è stato creato per un formato di stampa specifico con margini non standard, aree di abbondanza o segni di stampa inseriti nella geometria della pagina, il documento di partenza deve essere corretto prima che qualsiasi convertitore possa produrre un risultato pulito.
Torna al file di progetto originale in InDesign, Illustrator, Affinity Publisher o Canva, e riesportalo con queste impostazioni:
Dopo aver riesportato con queste impostazioni, converti di nuovo tramite Flipbooks AI. Il convertitore della piattaforma gestisce i PDF puliti esportati per lo schermo con i risultati più coerenti e precisi.
Se il file di progetto originale non è disponibile e hai solo il PDF, la finestra “Ritaglia pagine” di Adobe Acrobat ti permette di impostare una CropBox che elimina gli spazi bianchi invisibili intorno a ogni pagina. Questo ripristina il rapporto corretto del contenuto prima di inviare il file al convertitore.
Per gli editori di cataloghi che partono da zero, gli strumenti Creatore di cataloghi digitali gratis e Generatore di cataloghi prodotti di Flipbooks AI includono modelli già dimensionati per gli schermi dei tablet, eliminando la necessità di correggere qualsiasi PDF esistente.
Il problema del flipbook schiacciato è quasi sempre risolvibile. La soluzione si trova nella catena che unisce le dimensioni del PDF, il codice di incorporamento e la piattaforma che esegue la conversione. Inizia dalle dimensioni del file di partenza, verifica che l’incorporamento usi dimensioni adattive e usa una piattaforma che gestisca il rendering in modo intelligente, senza richiedere lavoro manuale sul CSS.
Inizia gratis su Flipbooks AI e carica oggi stesso il tuo primo PDF. Nessuna filigrana, nessun incorporamento a dimensione fissa e nessuno schiacciamento su nessuno schermo.
Sfoglia tutti gli strumenti e i modelli per flipbook per trovare quello più adatto al tuo caso d’uso, dai cataloghi prodotti ai portfolio digitali. Oppure confronta i piani di prezzo per scegliere il livello adatto al tuo volume di pubblicazione.
Scegli la tua lingua
