Tu flipbook se ve deformado, aplastado o estirado en tabletas por conflictos de relación de aspecto entre las dimensiones de tu PDF y el área de visualización de la tableta. Este artículo explica las causas principales, muestra soluciones prácticas para la configuración de exportación de tu PDF y el código para incrustar, y te enseña a publicar flipbooks que se vean bien en cualquier pantalla de tableta.
Abriste tu flipbook en una tableta y, en lugar del diseño limpio y nítido que creaste, apareció algo que parece haber pasado por una máquina de pasta. Las páginas están estrechas, las imágenes estiradas y el texto cuesta leerlo. Si te suena familiar, no eres el único. El problema del aplastamiento es uno de los problemas de visualización más comunes que enfrentan los editores digitales, y casi siempre se debe a un desajuste entre las dimensiones de tu PDF y el área de visualización de la tableta. La buena noticia es que tiene solución, y Flipbooks AI hace el proceso mucho más fácil que hacerlo a mano.
Antes de corregir nada, conviene entender exactamente qué pasa visual y técnicamente.
"Aplastado" es la experiencia del usuario. El término técnico es desajuste de relación de aspecto. Tu PDF tiene una relación propia entre ancho y alto, por ejemplo 1:1,41 para páginas A4 en vertical. La pantalla de tu tableta tiene una relación completamente distinta, a menudo 4:3 en un iPad o 16:10 en muchas tabletas Android. Cuando el visor del flipbook intenta ajustar tus páginas al espacio disponible sin respetar la relación original, escala un eje independientemente del otro. El resultado: todo se ve comprimido.
La mayoría de la gente diseña los PDF en orientación vertical, porque así funcionan los diseños para impresión. Pero las tabletas suelen sostenerse en horizontal, sobre todo durante presentaciones o al navegar por catálogos de productos. Una página vertical metida en un área de visualización horizontal se comprime a lo ancho para ajustarse a la altura, y tus columnas, cuidadosamente diseñadas, terminan pareciendo las de un teléfono estrecho.
⚠️ El aplastamiento es predecible, no aleatorio. Corresponde directamente a la diferencia de relación entre tu PDF y la pantalla de destino. Una vez que conoces la relación, puedes corregirlo de forma sistemática.
Las tabletas están en un punto intermedio incómodo entre los teléfonos y los equipos de escritorio. Son lo bastante grandes para mostrar dobles páginas, pero no se comportan como los navegadores de escritorio a la hora de renderizar contenido incrustado.
Cuando incrustas un flipbook con una etiqueta <iframe> en un sitio web, un navegador de escritorio normalmente tiene mucho espacio horizontal y reacomoda el contenido alrededor del código incrustado. Los navegadores de tabletas aplican su propia lógica de escalado del viewport, que puede anular las dimensiones que definiste si están fijadas en píxeles. Un atributo width="800" funciona bien en un escritorio ancho, pero falla en una tableta con un viewport más estrecho, y hace que el flipbook se comprima verticalmente para que todo quepa.
Los iPad y las tabletas Android manejan de forma distinta la densidad de píxeles y el escalado del viewport. Los iPad son más constantes, sobre todo entre versiones de Safari. Las tabletas Android de distintos fabricantes aplican comportamientos de escalado diferentes. Un flipbook que se ve bien en una Samsung Galaxy Tab puede verse aplastado en una Lenovo Tab por las diferencias de resolución de pantalla y los valores predeterminados de renderizado del navegador.
| Tableta | Relación de pantalla | Resolución habitual | Orientación predeterminada |
|---|---|---|---|
| iPad Pro 12.9" | 4:3 | 2732 x 2048 | Horizontal |
| iPad Air 11" | 4:3 | 2360 x 1640 | Vertical |
| Samsung Galaxy Tab S9 | 16:10 | 2560 x 1600 | Horizontal |
| Lenovo Tab P12 | 16:10 | 2560 x 1600 | Vertical |
| Google Pixel Tablet | 16:10 | 2560 x 1600 | Horizontal |
💡 Diseña primero para la relación de tableta más común: 4:3 para iPad, 16:10 para Android. Si tu público usa ambos, usa una plataforma que maneje el escalado automáticamente en lugar de crear dos PDF separados.
El problema del aplastamiento casi siempre viene de uno de cinco lugares. Identifica cuál aplica a tu caso y la solución se vuelve clara.
Si creaste tu PDF en un tamaño de impresión estándar como A4 (210 x 297 mm) o US Letter (8,5 x 11 pulgadas), esas dimensiones no encajan limpiamente con ninguna relación de pantalla de tableta. El conversor de flipbook escala la página para que quepa en el visor, pero cuando hay un desajuste de relación importante, comprime el contenido para llenar el espacio disponible.
Esta es la causa más común de todas. Los códigos para incrustar con width="1200" height="900" funcionan bien en equipos de escritorio anchos, pero fallan en las tabletas. El navegador aplica el ancho fijo y, como la altura también es fija, el contenido se comprime para caber en esas dimensiones limitadas.
Si alojas el flipbook en tu propio sitio web, la etiqueta <meta name="viewport"> de tu HTML <head> controla cómo los navegadores de tabletas escalan la página. Una etiqueta que falta o está mal configurada hace que el navegador aplique un viewport virtual predeterminado de 980 px, lo que puede distorsionar bastante tu incrustación en pantallas de tableta.
El div que envuelve tu flipbook incrustado puede tener overflow: hidden combinado con una altura fija. Cuando la tableta renderiza la página a otra escala, la restricción de altura recorta o comprime el flipbook para que quepa dentro de la caja.
Algunos conversores antiguos de PDF a flipbook usan canalizaciones de renderizado fijas que no tienen en cuenta los viewports de las tabletas. Generan el flipbook en un tamaño canónico único y esperan que cada pantalla lo muestre exactamente a esa escala.
La solución más limpia empieza con tu PDF original. Ajustar bien las dimensiones antes de convertir significa que el visor del flipbook tiene menos trabajo y menos oportunidades de escalar mal.
En lugar de diseñar con medidas de impresión, usa una relación pensada para pantallas. Para audiencias centradas en iPad, una relación de página 4:3 como 1024 x 768 pt llena la pantalla sin artefactos de escalado. Para audiencias de tabletas Android, una relación 16:10 de 1280 x 800 px funciona mejor. En cualquier caso, partes de una relación que encaja bien con la forma en que la tableta la va a renderizar.
Para ver en tableta, los PDF en horizontal siempre rinden mejor. Una página horizontal llena una tableta sostenida en horizontal de borde a borde, no deja espacios en blanco incómodos a los lados y admite diseños de dos columnas que siguen siendo legibles con el zoom normal, sin que el lector tenga que pellizcar y desplazarse.
| Caso de uso | Tamaño de PDF recomendado | Relación | Ideal para |
|---|---|---|---|
| Catálogo de productos | 1024 x 768px | 4:3 | Audiencias principalmente en iPad |
| Doble página de revista | 1280 x 800px | 16:10 | Tabletas Android |
| Doble página | 2048 x 768px | ~8:3 | Vista de flipbook de dos páginas |
| Libro en vertical | 800 x 1067px | 3:4 | Sostener la tableta en vertical |
| Folleto cuadrado | 1000 x 1000px | 1:1 | Audiencias con varios dispositivos |
✅ Exporta tu PDF sin marcas de corte, sin sangrados y en modo de color RGB cuando vayas a pantallas digitales. Los ajustes de exportación para impresión añaden espacio en blanco invisible que altera los cálculos de relación durante la conversión.
Si ya convertiste tu PDF y no quieres empezar de nuevo, el código para incrustar es donde a menudo puedes resolver el problema del aplastamiento sin tocar el documento original.
Reemplaza cualquier dimensión fija en píxeles de tu incrustación <iframe> por valores en porcentaje y una declaración CSS de aspect-ratio:
<iframe src="your-flipbook-url" width="100%" style="aspect-ratio: 4/3; border: none;"></iframe>
Esto le indica al navegador que ocupe el 100 % del ancho del contenedor y mantenga la altura correcta automáticamente, sin importar el tamaño de pantalla ni la orientación del dispositivo.
Los navegadores modernos, incluidos Safari en iPad y Chrome en tabletas Android, admiten por completo la propiedad CSS aspect-ratio. Añadir aspect-ratio: 16/9 o aspect-ratio: 4/3 al div contenedor de tu incrustación obliga al navegador a calcular la altura proporcionalmente y elimina por completo el efecto de compresión.
Las herramientas de desarrollo del navegador tienen un modo de emulación de dispositivos, pero la emulación de tabletas en un navegador de escritorio no sustituye del todo a las pruebas en hardware real. Los motores de renderizado, el manejo de la densidad de píxeles y los comportamientos táctiles difieren de forma notable. Si no puedes probar en hardware real, comparte el enlace directo del flipbook con alguien que tenga la tableta objetivo y pídele que te envíe capturas de pantalla de lo que ve.
💡 La mayoría de las plataformas de flipbook te dan un enlace para compartir, no solo un código para incrustar. Envía ese enlace directo a tu tableta para hacer una prueba rápida en el dispositivo, sin modificar el código de ningún sitio web ni necesitar acceso de desarrollador.
Flipbooks AI resuelve el problema del escalado en tabletas de forma automática. Su visor está construido sobre un motor de renderizado adaptable que se ajusta a cualquier tamaño de pantalla, así que no necesitas configurar CSS ni modificar atributos de iframe a mano. Así se usa:
Entra en Flipbooks AI y crea una cuenta o inicia sesión. Haz clic en "Nuevo flipbook" y sube tu PDF. La plataforma admite documentos grandes de varias páginas y conserva tus fuentes, imágenes y gráficos vectoriales con calidad completa durante toda la conversión. Para obtener los mejores resultados en tabletas, sube un PDF que ya esté en una relación pensada para pantallas. Si tu PDF es A4 en vertical, el visor lo mostrará igual, pero un diseño horizontal llena la pantalla de la tableta con más naturalidad y requiere menos escalado del lado del visor.
Una vez convertido, Flipbooks AI muestra una vista previa en tiempo real. Usa las opciones de vista previa por dispositivo para comprobar cómo se ve tu flipbook en tamaños de tableta y de dispositivos móviles antes de publicarlo o compartirlo. El visor usa internamente un escalado basado en porcentajes, así que el flipbook llena cualquier viewport en el que se cargue, sin intervención manual. También puedes activar el interruptor de diseño adaptable para dispositivos móviles en los ajustes de tu flipbook, que cambia la interacción predeterminada de clic a deslizamiento para una experiencia más natural en tableta.
Flipbooks AI te ofrece dos opciones para compartir: un enlace directo y un código para incrustar. Ambos son totalmente adaptables. El enlace directo abre el flipbook en un visor a pantalla completa que se adapta a cualquier orientación del dispositivo y a cualquier tamaño de pantalla. El código para incrustar usa dimensiones en porcentaje por defecto. Para integraciones en sitios web, la herramienta Incrustar flipbook en un sitio web ofrece un fragmento de código para incrustar ya preconfigurado, con los ajustes adaptables ya establecidos.
✅ Usa el Conversor de PDF a flipbook para una experiencia de subida más sencilla. Detecta automáticamente las dimensiones de tu PDF y aplica los ajustes de escalado adecuados para una visualización adaptable.
Incluso con las herramientas adecuadas, los mismos errores siguen apareciendo en los hilos de soporte y en los foros de usuarios. Aquí tienes una referencia rápida de los problemas más frecuentes:
| Error | Por qué se aplasta | Solución |
|---|---|---|
iframe con width="800" fijo | El viewport de la tableta, más estrecho que 800 px, anula la dimensión fija | Usa width="100%" con CSS aspect-ratio |
| PDF A4 en vertical en tableta horizontal | La relación 1,41:1 choca con una pantalla 4:3 o 16:10 | Rediseña en horizontal o con relación 4:3 |
overflow:hidden en un contenedor de altura fija | Recorta el contenido, y el navegador comprime el flipbook para que quepa | Quita la altura fija y usa el truco del porcentaje con padding-top |
| Sin etiqueta meta de viewport en alojamiento propio | El navegador aplica un viewport virtual predeterminado de 980 px | Añade <meta name="viewport" content="width=device-width, initial-scale=1"> |
| PDF exportado con marcas de sangrado de impresora | Añade espacio en blanco invisible alrededor de las páginas | Vuelve a exportar solo con ajustes de exportación digital o para pantalla |
| Dobles páginas guardadas como páginas sencillas | Cada doble página es el doble de ancha y se aplasta para caber en el visor | Divide las dobles páginas en páginas individuales antes de convertir |
⚠️ Cuidado con las dobles páginas. Muchos diseñadores para impresión exportan PDF con dos páginas combinadas en una sola doble página ancha. Los conversores de flipbook tratan cada doble página como una sola página e intentan encajarla en el visor, lo que produce un resultado muy aplastado. Divide siempre las dobles páginas en páginas individuales antes de convertir.
A veces el problema del aplastamiento va más allá de un ajuste de dimensiones. Si tu PDF se creó originalmente para un tamaño de impresión específico, con márgenes no estándar, áreas de sangrado o marcas de impresora incorporadas en la geometría de la página, el documento original necesita corrección antes de que cualquier conversor pueda producir un resultado limpio.
Vuelve a tu archivo de diseño original en InDesign, Illustrator, Affinity Publisher o Canva, y vuelve a exportar con estos ajustes:
Después de volver a exportar con estos ajustes, vuelve a convertir con Flipbooks AI. El conversor de la plataforma maneja los PDF limpios exportados para pantalla con los resultados más constantes y precisos.
Si no tienes el archivo de diseño original y solo tienes el PDF, el cuadro "Recortar páginas" de Adobe Acrobat te permite definir un CropBox que elimina el espacio en blanco invisible alrededor de cada página. Así se restaura la relación de contenido correcta antes de pasar el archivo por el conversor.
Para los editores de catálogos que empiezan desde cero, las herramientas Creador de catálogos digitales gratis y Generador de catálogos de productos de Flipbooks AI incluyen plantillas integradas ya dimensionadas para pantallas de tableta, así que no hace falta corregir ningún PDF existente.
El problema del flipbook aplastado casi siempre tiene solución. La clave está en algún punto de la cadena formada por las dimensiones de tu PDF, tu código para incrustar y la plataforma que hace la conversión. Empieza por las dimensiones del archivo original, comprueba que tu código para incrustar use un tamaño adaptable y usa una plataforma que gestione el renderizado de forma inteligente, sin necesidad de trabajar el CSS a mano.
Empieza gratis en Flipbooks AI y sube tu primer PDF hoy mismo. Sin marcas de agua, sin incrustaciones de tamaño fijo y sin aplastamiento en ninguna pantalla.
Explora todas las herramientas y plantillas de flipbook para encontrar la opción adecuada para tu caso, desde catálogos de productos hasta portafolios digitales. O compara los planes y precios para elegir el nivel que se ajuste a tu volumen de publicación.
Elige tu idioma
