Probador de capacidad de respuesta iPhone Duo | Comprobador móvil
El comprobador de adaptabilidad web y móvil más preciso. Obtenga una vista previa de sus diseños en el iPhone Duo de doble pantalla, pantallas plegables y dispositivos modernos en tiempo real.
Site Blocked from Preview
has blocked embedding in iframes via X-Frame-Options or CSP.
@media (orientation: landscape)📐 Does horizontal-viewport-segments: 2 work in mockups?
The Direct Answer: Inside a normal <iframe> on desktop, @media (horizontal-viewport-segments: 2) evaluates to 1 by default.
Why? The CSS Viewport Segments specification is designed to query the underlying host operating system window, not an HTML element or CSS container. Because your desktop computer has a single unified display, standard desktop browsers report 1 segment to all page iframes.
segments: 2!spanning-css-polyfill script to your website to test dual-screen CSS rules anywhere.Por qué iPhone Duo expone el mal diseño web adaptable
Durante más de una década, el diseño adaptable asumió un lienzo continuo. El lanzamiento del iPhone Duo de doble pantalla rompe esta premisa con dos pantallas conectadas por una bisagra activa.
La trampa de la bisagra
Elementos centrales como barras de búsqueda, modales y botones CTA quedan cortados por la bisagra física de 16px si el código no reconoce segmentos.
Relaciones de aspecto cuadradas
Las pantallas desplegadas generan una proporción cercana a 1:1. Diseños optimizados solo para desplazamiento vertical quedan vacíos o con demasiado espacio en blanco.
Nuevos estándares CSS
Las media queries W3C para doble pantalla y las variables de entorno CSS (env(viewport-segment-width)) ahora son conocimientos obligatorios.
/* Detect iPhone Duo & dual-screen unfolded mode */
@media (horizontal-viewport-segments: 2) {
.site-container {
display: grid;
/* Map columns to screen 1 and screen 2 with fold gap in between */
grid-template-columns:
env(viewport-segment-width 0 0)
calc(env(viewport-segment-left 1 0) - env(viewport-segment-width 0 0))
env(viewport-segment-width 1 0);
}
.sidebar {
grid-column: 1;
}
.main-content {
grid-column: 3;
}
}Prueba en todos los dispositivos populares
Compara la adaptabilidad en iPhones, plegables Android y dispositivos de doble pantalla de Microsoft.
iPhone Duo (Unfolded)
7.6″ Super Retina XDR OLED (2670×1878 at 430 ppi)
iPhone Duo (Cover Folded)
5.4″ Super Retina XDR OLED (1398×2034 at 460 ppi)
iPhone 16 Pro Max
Flagship Super Retina XDR
Samsung Galaxy Z Fold 6
Dynamic AMOLED 2X Foldable
Google Pixel Fold
Foldable OLED Landscape Inner Screen
Microsoft Surface Duo 2
Dual Screen AMOLED with Physical Gap
Frequently Asked Questions
Everything you need to know about testing website responsiveness on iPhone Duo and modern devices.
¿Qué es el probador de capacidad de respuesta iPhone Duo?
El probador de capacidad de respuesta iPhone Duo (duoresponsive.com) es un comprobador de capacidad de respuesta móvil en línea diseñado para previsualizar y probar sitios web en el nuevo iPhone Duo de doble pantalla de Apple, dispositivos plegables y móviles modernos. Ofrece simulación perfecta de pantallas duales desplegadas, pantallas de cubierta, espacio de bisagra y media queries CSS duales.
¿Cómo funciona este comprobador de adaptabilidad web?
Ingresa cualquier URL en nuestra barra de prueba y la herramienta mostrará el sitio en vivo dentro de marcos de hardware precisos en tu navegador. Puedes inspeccionar la visualización en pantalla simple o doble, alternar posturas libro o tienda, examinar la línea de pliegue central y rotar entre horizontal y vertical sin instalar simuladores.
¿Por qué los sitios web adaptables tradicionales fallan en iPhone Duo?
La mayoría de sitios asumen un solo viewport continuo. Al desplegarse, iPhone Duo abarca dos pantallas separadas con una bisagra física de 16px. Sin CSS para doble pantalla (como @media (horizontal-viewport-segments: 2) y env(viewport-segment-width)), las barras de búsqueda, modales y botones pueden cortarse por la mitad.
¿Puedo probar servidores de desarrollo local como localhost?
¡Sí! Como el probador funciona totalmente del lado del cliente en tu propio navegador, puedes ingresar URLs de desarrollo local como http://localhost:3000 o http://localhost:4321 para probar antes de publicar.
¿Qué debo hacer si un sitio muestra conexión rechazada o pantalla en blanco?
Algunos sitios web (como Google o Twitter) envían encabezados de seguridad HTTP estrictos como X-Frame-Options: DENY que impiden su inserción en iframes. Para estos sitios, puedes hacer clic en 'Abrir en pestaña externa' o probar mediante un servidor local o proxy.