Diseño web para celulares plegables: llegó el iPhone Duo
El 9 de septiembre Apple presentó el iPhone Duo, su primer celular plegable. En menos de 24 horas se convirtió en la segunda búsqueda más popular de Colombia según Google Trends, con más de 100.000 consultas y un crecimiento del 1.000%.
Todos los medios están escribiendo lo mismo: precio, cámara, fecha de llegada. Este artículo va por otro lado, porque hay una consecuencia que casi nadie está mencionando y que te afecta directamente si tienes una página web.
Ese teléfono se abre a 7,6 pulgadas. Y ese tamaño de pantalla, para la mayoría de sitios web colombianos, es tierra de nadie.
Primero, los datos del iPhone Duo
Para ubicarnos, esto es lo que Apple confirmó en su sala de prensa oficial:
- Pantalla interna: 7,6 pulgadas Super Retina XDR, se abre como un libro
- Pantalla externa: 5,4 pulgadas, la que usas con el teléfono cerrado
- Procesador: chip A20 Pro
- Cámara principal: 48 MP Fusion
- Batería: hasta 44 horas de reproducción de video
- Precio base: USD $1.999 por la versión de 256 GB
- Colores: Star White y Night Sky
- Preventa: 16 de octubre — Salida: 23 de octubre
¿Cuánto costará en Colombia?
Colombia quedó incluida en la primera fase de lanzamiento, junto a más de 70 países. Los USD $1.999 equivalen a unos $6,2 millones de pesos al cambio directo, pero las estimaciones de la prensa económica colombiana lo ubican entre $11,5 y $12,5 millones una vez sumados impuestos, aranceles y margen de importación.
Sí, es carísimo. Y no importa: lo relevante no es cuántos se vendan este año, sino que el formato plegable acaba de volverse mainstream. Samsung lleva años en esto, pero cuando Apple entra a una categoría, la categoría deja de ser nicho.
El problema que nadie está mencionando
El diseño web para celulares plegables dejó de ser un tema teórico el miércoles pasado.
Piénsalo así: tu sitio web probablemente está diseñado para tres escenarios — celular, tableta y escritorio. Un plegable abierto no es ninguno de los tres. Cae justo en una franja intermedia que casi nadie configuró.
* "Celular promedio" es una referencia aproximada del rango dominante actual (6,1 a 6,7 pulgadas). Los demás valores son especificaciones oficiales.
Dónde cae exactamente en tus breakpoints
| Dispositivo | Ancho aproximado | Qué suele pasar |
|---|---|---|
| Celular | 360 – 430 px | ✅ Está bien configurado |
| Plegable abierto | ~700 – 850 px | ⚠️ Zona muerta en la mayoría de sitios |
| Tableta | 768 – 1024 px | ✅ Normalmente configurada |
| Escritorio | 1200 px o más | ✅ Es el diseño principal |
* Anchos en píxeles CSS. El rango del plegable abierto es una estimación basada en la diagonal y proporción anunciadas.
Qué se rompe exactamente
Cuando un sitio no contempla ese ancho intermedio, pasan cinco cosas bastante feas:
1. Líneas de texto larguísimas
Un párrafo diseñado para 400 px de ancho, estirado a 800 px sin límite, produce líneas de 120 caracteres. El ojo se pierde al saltar de renglón. Es el error de legibilidad más común y el más fácil de arreglar.
2. El menú hamburguesa que no debería estar ahí
En una pantalla de 7,6 pulgadas hay espacio de sobra para un menú completo. Seguir mostrando el ícono de tres rayitas se ve improvisado y esconde secciones que deberían estar a un toque.
3. Imágenes de cabecera deformadas
Los hero con altura fija y fondo recortado se ven estirados o cortados en la mitad. Si además usas una sola imagen sin srcset, o se ve pixelada o pesa de más.
4. Cuadrículas atascadas en una columna
Ese catálogo de productos que en celular muestra un ítem por fila y en escritorio muestra cuatro, en el plegable sigue mostrando uno. Desperdicias media pantalla.
5. Formularios que se ven perdidos
Campos de 100% de ancho en una pantalla ancha producen inputs de 800 px para escribir un nombre. Se ve raro y baja la conversión.
Qué revisar en tu diseño web para celulares plegables
La buena noticia: el diseño web para celulares plegables no obliga a rehacer el sitio desde cero. Son ajustes concretos.
Si tu sitio está en WordPress con Elementor
- Activa los breakpoints personalizados en Elementor (Ajustes → Funciones → Breakpoints adicionales). Habilita "Tablet Extra" y ubícalo alrededor de 880 px.
- Revisa cada sección en ese ancho intermedio y ajusta columnas, tipografía y espaciados.
- Ponle
max-widtha los contenedores de texto: entre 65 y 75 caracteres por línea es el rango cómodo de lectura. - Cambia el punto de activación del menú móvil para que en 800 px ya muestre el menú completo.
Si tienes desarrollo a medida
- Usa container queries de CSS en lugar de depender solo de
@media. Los componentes se adaptan a su contenedor y no al viewport, que es exactamente lo que necesitas cuando el viewport cambia de tamaño en pleno uso. - Tipografía fluida con
clamp()en vez de saltos bruscos entre breakpoints. - Cuadrículas con
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)): se acomodan solas sin que tengas que declarar cada caso. - Escucha el evento
resize: en un plegable el usuario cambia el tamaño de pantalla mientras navega, algo que en un celular normal nunca pasa.
Cómo probarlo sin comprar el teléfono
Abre Chrome, presiona F12, activa el modo dispositivo y elige un ancho personalizado de 800 px. Chrome DevTools ya trae perfiles de plegables como el Galaxy Fold. Recorre tu sitio completo en ese ancho: si algo se ve raro ahí, se va a ver raro en el iPhone Duo.
¿Vale la pena hacerlo ahora?
Alguien podría decir: son teléfonos de doce millones de pesos, ¿cuántos clientes míos van a tener uno?
Respuesta honesta: pocos, este año. Pero hay tres razones por las que igual conviene.
La primera es que Samsung ya vende plegables en Colombia desde hace años y a precios que bajaron bastante. Ese tráfico ya está llegando a tu sitio, solo que no lo estás midiendo. La segunda es que quien compra un teléfono de doce millones suele ser justamente el perfil de cliente con capacidad de compra que quieres atender bien. Y la tercera es que casi todos los arreglos de esta lista mejoran también la experiencia en tabletas y en pantallas medianas, que sí tienen volumen hoy.
Dicho de otro modo: pensar el diseño web para celulares plegables hoy no es prepararse para un dispositivo exótico, es cerrar un hueco que tu sitio ya tenía.
En resumen
El iPhone Duo no va a cambiar tu negocio. Pero sí marca el momento en que el formato plegable deja de ser una curiosidad de Samsung y se vuelve un estándar de la industria. Los sitios que lo contemplen desde ahora van a llegar bien parados a 2027; los que no, van a acumular una capa más de deuda técnica.
En Olaciregui Studio desarrollamos sitios web pensados para todos los tamaños de pantalla, no solo para los tres de siempre. Si quieres saber cómo se ve tu sitio actual en un plegable y qué costaría ajustarlo, empieza por El Cotizador — es gratis y toma un par de minutos.