Il tuo flipbook è nitido sul monitor del computer, ma sul telefono si riduce a un francobollo. Questo articolo spiega perché gli incorporamenti a larghezza fissa non funzionano su mobile e come sostituirli con un contenitore adattivo, impostazioni viewport corrette e una rapida routine di test.
Hai incollato il codice di incorporamento, hai visto l’anteprima sul portatile e il flipbook sembrava perfetto. Poi un collega l’ha aperto su un telefono e ti ha mandato uno screenshot di un piccolo rettangolo perso in un mare di spazio bianco. Se il tuo flipbook incorporato è troppo piccolo sul telefono, la causa è quasi sempre il codice di incorporamento stesso, non il flipbook. La buona notizia: un incorporamento adattivo richiede circa dieci minuti di configurazione, e Flipbooks AI include già un visualizzatore adattivo per dispositivi mobili che funziona bene non appena il contenitore che lo circonda è corretto.
Questo articolo spiega perché il flipbook si rimpicciolisce, come correggere il tuo incorporamento con poche righe di CSS e come testare il risultato, così non pubblichi mai più una pagina mobile rotta.
La maggior parte dei frammenti di incorporamento copiati e incollati è un iframe con numeri fissi, qualcosa come width="900" height="600". Su un portatile da 1440 pixel va bene. Su un telefono con un viewport largo 390 pixel succede una di due cose:
Una terza variante, più subdola, compare quando la pagina non ha il tag meta viewport. Il telefono allora si comporta come se fosse un computer desktop largo 980 pixel e rimpicciolisce tutto. Il tuo flipbook sembra “piccolo” perché tutta la pagina è piccola.
💡 Diagnosi rapida: ruota il telefono in orizzontale. Se il flipbook all’improvviso sembra a posto, il problema è una larghezza fissa o un tag viewport mancante, non il file del flipbook.
L’idea di base del design adattivo è semplice: smetti di descrivere le dimensioni in pixel e inizia a descriverle come una quota dello spazio disponibile.
| Approccio | Valore di esempio | Risultato su desktop | Risultato su telefono |
|---|---|---|---|
| Pixel fissi | width="900" | Sembra corretto | Sborda o rimpicciolisce la pagina |
| Larghezza in percentuale | width: 100% | Riempie la colonna | Riempie lo schermo |
| Unità viewport | width: 100vw | Tutta la larghezza della finestra | Può causare scorrimento laterale se c’è del padding |
| Riquadro con proporzioni | aspect-ratio: 16 / 10 | Mantiene la forma | Mantiene la forma e scala l’altezza |
La combinazione vincente è una larghezza in percentuale più un rapporto di aspetto, perché ti dà sia una larghezza flessibile sia un’altezza prevedibile.
Controlla questi sintomi prima di toccare qualsiasi codice di incorporamento:
Se ne riconosci qualcuno, correggi prima il viewport. Richiede una sola riga.
Apri il template della tua pagina e controlla la sezione head alla ricerca di questa riga:
<meta name="viewport" content="width=device-width, initial-scale=1">
Senza di essa, i browser mobili presuppongono una tela desktop ampia. Piattaforme come WordPress, Webflow e Wix la aggiungono automaticamente nella maggior parte dei temi, ma i template personalizzati, le vecchie landing page e alcuni strumenti che portano le email sul web la omettono.
⚠️ Avvertenza: non aggiungere
user-scalable=noomaximum-scale=1al tag. Blocca lo zoom a pinza, il che danneggia l’accessibilità e può abbassare i tuoi punteggi di usabilità.
La correzione più affidabile è racchiudere l’iframe in un contenitore che controlla le dimensioni, poi far riempire il contenitore all’iframe. Ecco lo schema.
Dalla dashboard del tuo flipbook, copia il codice di incorporamento. Sarà più o meno così:
<iframe src="https://your-flipbook-url" width="900" height="600" frameborder="0" allowfullscreen></iframe>
Lascia src esattamente com’è. Cambiano solo gli attributi di dimensione.
Sostituisci i numeri fissi con un contenitore:
<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;
}
Questa è l’intera correzione per i browser moderni. Il contenitore occupa tutta la larghezza della sua colonna, non supera mai 1000 pixel e mantiene una forma 16:10 a ogni dimensione.
Se devi supportare browser molto vecchi che non hanno aspect-ratio, usa invece il trucco del padding:
.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;
}
Entrambi gli schemi fanno lo stesso lavoro. Scegli il primo per un codice pulito, il secondo per la massima compatibilità.
Un riquadro 16:10 funziona bene su desktop, ma un telefono tenuto in verticale è alto e stretto. Un flipbook mostrato come doppia pagina dentro un riquadro basso e largo lascia a ogni pagina la dimensione di un francobollo su uno schermo da 390 pixel.
| Dispositivo | Larghezza tipica | Layout consigliato | Rapporto suggerito |
|---|---|---|---|
| Desktop grande | 1200 px e oltre | Doppia pagina | 16 / 10 |
| Portatile | Da 1000 a 1200 px | Doppia pagina | 16 / 10 |
| Tablet in verticale | Da 700 a 800 px | Singola o doppia pagina | 4 / 3 |
| Telefono in verticale | Da 360 a 430 px | Pagina singola | 3 / 4 o 4 / 5 |
| Telefono in orizzontale | Da 640 a 900 px | Doppia pagina | 16 / 10 |
Puoi cambiare i rapporti con una media query:
@media (max-width: 600px) {
.flipbook-embed {
aspect-ratio: 3 / 4;
}
}
Sui telefoni il flipbook ora ottiene un riquadro alto, il visualizzatore mostra una pagina alla volta e il testo diventa leggibile senza zoom.
✅ Buona pratica: sui telefoni, dai al flipbook quanto più spazio possibile sullo schermo. Un riquadro 3:4 a larghezza piena è di solito molto più leggibile di un piccolo riquadro 16:10.
Anche un incorporamento perfetto fallisce se la colonna che lo circonda è stretta. È la seconda causa più comune di flipbook minuscoli.
Negli editor a blocchi di WordPress, in Elementor, Divi e in altri page builder simili, un incorporamento vive dentro una colonna. Se la colonna ha un padding di 40 pixel per lato e una larghezza del 33 percento su desktop, potrebbe non passare al 100 percento su mobile, a meno che tu non lo imposti.
Controlla queste impostazioni:
max-width fissa più piccola dello schermo.overflow: hidden su un elemento padre che ritaglia il riquadro.Alcuni builder ripuliscono l’iframe ed eliminano le classi del contenitore. Se il tuo CSS non viene mai applicato, sposta le regole di stile nel pannello CSS personalizzato del tema, oppure usa stili inline sul contenitore:
<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>
Se non hai ancora pubblicato il tuo flipbook, ecco la strada pulita. Lo strumento Incorpora flipbook sul sito è costruito proprio per questa situazione, e il visualizzatore è adattivo fin dall’inizio.
Imposta prima l’aspetto, perché le modifiche fatte in seguito aggiornano comunque automaticamente la versione incorporata:
Gli utenti del piano Professional ottengono anche statistiche e generazione di contatti, che mostrano quanti lettori aprono il flipbook da mobile rispetto a desktop. Consulta i piani e prezzi per la ripartizione completa delle funzioni. Questi numeri ti dicono subito se una correzione vale la fatica: se il 70 percento dei tuoi lettori usa il telefono, un incorporamento minuscolo ti sta costando attenzione reale.
I diversi costruttori di siti gestiscono gli incorporamenti in modi diversi. Ecco un riferimento rapido.
| Piattaforma | Dove incollare | Trappola comune | Correzione |
|---|---|---|---|
| WordPress | Blocco HTML personalizzato | Il tema elimina il tag di stile | Aggiungi il CSS nel Customizer |
| Wix | Widget Incorpora un sito | Riquadro a pixel fissi | Allarga a tutta la larghezza, imposta il layout mobile separatamente |
| Squarespace | Blocco di codice | Il blocco ha margini stretti | Riduci il padding della sezione su mobile |
| Webflow | Elemento Incorpora | Il genitore ha una larghezza fissa | Usa una percentuale o max-width |
| Shopify | Sezione liquid personalizzata | Il contenitore del tema limita la larghezza | Usa una sezione a larghezza piena |
| HTML semplice | Ovunque | Tag viewport mancante | Aggiungi il tag meta |
Wix e gli strumenti simili di trascinamento mantengono un layout mobile separato. Un flipbook che sembra ottimo sulla tela desktop può restare un piccolo riquadro su mobile finché non apri l’editor mobile e lo ridimensioni a mano. Controlla sempre entrambe le viste.
Per i proprietari di negozi che condividono un Catalogo prodotti in una pagina prodotto, inserisci l’incorporamento in una sezione a larghezza piena invece che nella colonna stretta della descrizione del prodotto. Chi naviga da telefono potrà sfogliare le pagine senza zoom.
Vedere come questo funziona nella pratica aiuta a capire quale correzione conta di più per te.
Un ristorante ha incorporato il proprio menù in un widget laterale impostato a 300 pixel. Su desktop sembrava ordinato, ma sui telefoni il testo diventava illeggibile. Spostare l’incorporamento in una sezione a larghezza piena e usare un rapporto 3:4 su mobile ha risolto il problema. I proprietari che creano i menù con il Creatore di flipbook per menù di ristoranti spesso scoprono che la maggior parte dei clienti apre il link da un codice QR sul telefono, quindi la vista mobile è quella principale.
Un agente ha inserito la brochure di un immobile in un layout a due colonne. Su telefono le colonne si sono impilate, ma l’iframe ha mantenuto la sua larghezza di 800 pixel e ha sbordato. Racchiudere l’incorporamento e impostare max-width: 100% ha risolto. L’output del Creatore di brochure immobiliari funziona bene sui tablet durante le visite, ed è per questo che l’agente ha testato anche il rapporto per tablet.
Un designer freelance ha usato un flipbook del Creatore di portfolio digitali su un sito personale. L’incorporamento andava bene, ma la sezione che lo conteneva aveva overflow: hidden e un’altezza fissa di 500 pixel, che ritagliava il visualizzatore sui telefoni. Rimuovere l’altezza fissa e lasciare che fosse il rapporto di aspetto a stabilirla ha ripristinato tutto.
Non fidarti mai di una sola anteprima. Usa questa breve routine ogni volta che modifichi un incorporamento.
| Controllo | Condizione di superamento |
|---|---|
| Scorrimento orizzontale | Assente a ogni larghezza |
| Dimensione del testo nella pagina | Uguale alle altre pagine del sito |
| Larghezza del flipbook | Corrisponde alla colonna del contenuto |
| Leggibilità della pagina | Testo del corpo leggibile senza zoom a pinza |
| Aree di tocco | Frecce Avanti e Indietro facili da toccare |
| Velocità di caricamento | Il visualizzatore appare in pochi secondi |
💡 Consiglio pro: aggiungi
loading="lazy"all’iframe quando il flipbook si trova sotto la piega. La pagina si carica più in fretta, e chi ha connessioni lente ne trae il massimo beneficio.
Anche i proprietari di siti esperti ripetono questi errori.
A volte la migliore esperienza mobile non è affatto un incorporamento. Un link diretto apre il visualizzatore a tutta la finestra del browser, senza una pagina intorno che le faccia ostacolo. Aggiungi sotto l’incorporamento un pulsante visibile, come "Apri a schermo intero", che punti al link del tuo flipbook. I lettori sugli schermi piccoli lo toccheranno più spesso di quanto immagini, e su desktop non perdi nulla.
Se il tuo flipbook è anche qualcosa che le persone vogliono leggere più tardi, attiva i download offline così possono tenere il file sul telefono.
Un flipbook minuscolo su mobile è un problema di layout, e i problemi di layout si riparano in fretta: aggiungi il tag viewport, racchiudi l’iframe, usa una larghezza in percentuale con un rapporto di aspetto, passa a un rapporto più alto sui telefoni e testa su dispositivi reali.
Pronto a pubblicare un flipbook che appare giusto ovunque? Inizia gratis su Flipbooks AI, sfoglia tutti gli strumenti e i modelli disponibili oppure confronta i piani e prezzi per scegliere quello più adatto al tuo sito.
Scegli la tua lingua
