El primer iPhone plegable ya está a la venta, y tu web tiene que funcionar entre 382 y 951 píxeles de ancho
El iPhone Duo, el primer iPhone plegable, se puso a la venta el 23 de octubre en más de setenta países. El 30 de octubre llega a veintiocho más. Cuesta 1.999 dólares, tiene una pantalla exterior de 5,4 pulgadas y una interior de 7,6, y viene con iOS 27.1.
Lo relevante para cualquiera que tenga una web no es el teléfono. Es lo que WebKit publicó el 23 de octubre junto con Safari 27.1: la tabla de anchos de ventana del aparato. Van de 382 a 951 píxeles CSS, y el usuario pasa de un extremo al otro sin recargar la página.
Los cinco anchos
| Postura | Ancho | Alto mínimo | Alto máximo |
|---|---|---|---|
| Pantalla exterior, vertical (cerrado) | 382 px | 580 | 618 |
| Pantalla exterior, horizontal | 594 px | 368 | 406 |
| Pantalla interior, vertical | 669 px | 867 | 902 |
| Pantalla interior, horizontal | 951 px | 585 | 620 |
| Interior, dos ventanas lado a lado | 385 px | 571 | 609 |
Tres observaciones que valen más que la tabla:
El ancho de 669 píxeles es el problemático. Cae justo en la tierra de nadie de la mayoría de las plantillas: por encima del punto de corte de móvil y por debajo del de escritorio. Es el ancho donde aparecen los menús a medio montar, las columnas que se quedan huérfanas y los botones que se estiran hasta el absurdo.
El alto mínimo es 368 píxeles. Con el teléfono cerrado en horizontal, la ventana es más baja que alta. Cualquier cosa que ocupe pantalla fija (una cabecera pegada arriba, un aviso de cookies abajo) se come la mitad del espacio útil. Si has visto alguna vez una web donde el banner de cookies tapa el contenido y no deja llegar al botón de aceptar, es exactamente este escenario.
La barra de pestañas cambia de sitio. Abajo en la pantalla exterior, arriba en la interior, y encoge al hacer scroll. Lo que esté pegado a un borde tiene que contar con ello.
Lo que de verdad cambia: la sesión deja de tener un tamaño
Hasta ahora, un visitante llegaba con un ancho y se quedaba con él. Podía girar el móvil, y poco más. Con un plegable, una misma persona en una misma visita puede pasar de un diseño de móvil a uno de tableta y volver, varias veces, mientras lee tu página.
Esto rompe una suposición que está metida en muchísimo código antiguo: la de que el ancho se mide una vez, al cargar. Las webs hechas con consultas de medios, CSS Grid y Flexbox reaccionan solas. Las que detectan el dispositivo con JavaScript al arrancar y pintan en consecuencia, no.
Por eso la recomendación de WebKit es la que lleva siendo buena desde hace diez años, solo que ahora con una consecuencia visible: diseño adaptable de verdad, y nada de identificar el dispositivo por la cadena del navegador.
Para quien vende o compra publicidad
Si tu web tiene espacios publicitarios, o si planificas compra de medios, la tabla tiene una lectura directa:
- El rectángulo de 300 píxeles cabe en las cinco posturas.
- El formato de 728 solo cabe con el teléfono abierto en horizontal, a 951 píxeles.
- El de 970 no cabe en ninguna.
Y hay un efecto más sutil sobre la visibilidad: un espacio que queda a la vista en la pantalla interior vertical, con 867 píxeles de alto, puede quedar por debajo del pliegue en la exterior horizontal, con 368. El mismo anuncio, en el mismo aparato, cuenta como visible o no según cómo esté sujeto el teléfono.
Nadie ha publicado todavía cómo reparte la gente su tiempo entre las cinco posturas, así que eso es, por ahora, incertidumbre pura.
Probar una web en cinco anchos lleva veinte minutos. Descubrir por la queja de un cliente que el formulario no se podía enviar, bastante más.
Solicitar revisiónLas dos interfaces nuevas (que todavía no puedes usar)
Safari 27.1 añade dos APIs experimentales, desactivadas por defecto. Para encenderlas hay que ir a Ajustes, Apps, Safari, Avanzado, Indicadores de funciones. Es decir: no sirven en producción, porque ningún visitante va a hacer eso.
Postura del dispositivo. Expone si el teléfono está folded (parcialmente plegado) o continuous (plano). Ojo al detalle: completamente abierto y completamente cerrado informan lo mismo, así que sigue haciendo falta el ancho para distinguirlos. Es una interfaz menos útil de lo que su nombre promete.
Segmentos de ventana. Indica cuántos segmentos hay en horizontal y en vertical, y ofrece seis variables de entorno CSS para ajustar el contenido a los bordes de cada segmento. Es lo que permitiría, en el futuro, maquetar a dos páginas cuando el teléfono está en postura de libro.
De momento, lo único que Safari hace solo con el pliegue es mostrar los PDF a dos páginas cuando el aparato está medio cerrado. Las páginas web mantienen el diseño que les haya dado su autor.
El borde de la pantalla, un problema conocido
En la pantalla exterior, el sistema coloca sus controles a un lado. Safari todavía no deja que el contenido web ocupe ese espacio: lo que hace es muestrear la página y extender su color de fondo por esa zona.
El mecanismo que existe para esto es el de siempre: la etiqueta de ventana con viewport-fit="cover" más las variables de entorno para apartar el contenido importante de los controles del sistema. Y aquí WebKit dice algo que conviene leer dos veces: muchos sitios no aplican bien el margen en los cuatro bordes, y están buscando una alternativa más a prueba de fallos.
Traducido: hoy no se rompe nada, pero si en una versión futura abren ese espacio, las webs que no tengan bien puestos los márgenes van a pintar contenido debajo de los botones del sistema. Es deuda técnica con fecha de vencimiento desconocida.
Qué hacer con tu web
Nada urgente. Una tarde de trabajo, bien invertida:
- Prueba los cinco anchos. Con el simulador de Xcode 27.1 o, más rápido, estrechando la ventana del navegador a 382, 385, 594, 669 y 951 píxeles.
- Mira sobre todo el de 669. Es donde se rompen los menús y las rejillas de dos columnas.
- Comprueba el de 368 de alto. Con el banner de cookies puesto. Si no se puede llegar al botón, tienes un problema de diseño y, sobre todo, de que esa persona no puede decidir.
- Busca detección de dispositivo por JavaScript en tu web. Si la hay, sustitúyela por consultas de medios.
- Revisa lo que está pegado a los bordes: cabeceras fijas, botones flotantes, avisos inferiores.
- No programes nada contra las APIs de pliegue. Están detrás de un interruptor que nadie va a activar.
Y una fecha para la agenda de quien además tenga aplicación: desde abril de 2027, las capturas de iPhone Duo serán obligatorias para publicar en la App Store.
El resumen es menos dramático que el titular: si tu web está bien hecha, esto no te afecta; si no lo está, este aparato lo va a enseñar. Es la misma lógica que con la ley de accesibilidad web: los problemas de fondo no aparecen por una norma o un teléfono nuevo, solo se hacen visibles.
Si quieres que la miremos nosotros, en diseño y desarrollo web está el detalle, y si lo que tienes es una tienda, en tienda online.
Fuentes
Preguntas frecuentes
¿Tengo que rehacer mi web por el iPhone plegable?
Casi seguro que no. WebKit dice que la mayoría de los sitios funcionan sin cambios si están hechos con diseño adaptable de verdad: consultas de medios, CSS Grid y Flexbox. Lo que sí conviene es comprobarlo, porque los anchos nuevos caen en puntos donde muchos diseños no se han probado nunca.
¿Qué anchos tengo que probar?
Cinco: 382 píxeles con el teléfono cerrado en vertical, 594 cerrado en horizontal, 669 abierto en vertical, 951 abierto en horizontal y 385 con dos ventanas lado a lado en la pantalla interior. El más incómodo suele ser el de 669, que cae justo en la frontera entre móvil y tableta de muchas plantillas.
¿El usuario puede cambiar de tamaño sin recargar?
Sí, y ese es el cambio de fondo. Alguien puede abrir tu web con el teléfono cerrado, desplegarlo y pasar de 382 a 951 píxeles dentro de la misma sesión. Si tu web decide el diseño una sola vez al cargar, ahí es donde se nota.
¿Qué pasa con los banners publicitarios?
El rectángulo de 300 píxeles cabe en todas las posturas. El formato de 728 solo cabe con el teléfono abierto en horizontal. El de 970 no cabe en ninguna. Si vendes espacio publicitario o lo compras, conviene tenerlo en cuenta.
¿Hace falta programar algo especial para el pliegue?
Hay dos interfaces nuevas, la de postura del dispositivo y la de segmentos de ventana, pero vienen desactivadas por defecto y hay que encenderlas a mano en los ajustes de Safari. Es decir: no se pueden usar todavía en producción. El camino sensato es el de siempre, diseño adaptable, y el pliegue como mejora cuando esté disponible.
¿Cómo lo pruebo sin comprarme el teléfono?
Con el simulador de iPhone Duo que incluye Xcode 27.1, o de forma más tosca estrechando la ventana del navegador a cada uno de los cinco anchos. Lo segundo no reproduce el pliegue, pero detecta la mayoría de los problemas de diseño.