Testador de Responsividade iPhone Duo | Verificador Mobile
O verificador de responsividade de sites e dispositivos móveis mais preciso. Visualize seus layouts no iPhone Duo de tela dupla, telas dobráveis e smartphones modernos em tempo 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 que o iPhone Duo revela designs responsivos inadequados
Por mais de uma década, o design responsivo supunha uma tela única e contínua. O lançamento do iPhone Duo de tela dupla da Apple altera essa premissa com dois monitores unidos por uma dobra ativa.
A Armadilha da Dobradiça
Elementos centralizados como barras de busca, modais e botões são cortados ao meio pela dobradiça física de 16px se o CSS não usar segmentos de tela.
Proporções Quase Quadradas
As telas desdobradas criam uma proporção próxima de 1:1. Layouts projetados apenas para rolagem vertical parecem vazios em telas duplas.
Novos Padrões CSS
Consultas de mídia W3C para telas duplas e variáveis de ambiente CSS (env(viewport-segment-width)) agora são conhecimentos fundamentais.
/* 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;
}
}Teste em Todos os Dispositivos Populares
Compare a responsividade em iPhones, dobráveis Android e dispositivos de tela dupla da 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.
O que é o Testador de Responsividade iPhone Duo?
O Testador de Responsividade iPhone Duo (duoresponsive.com) é um verificador de responsividade de sites online criado especialmente para visualizar e testar páginas web no novo iPhone Duo de tela dupla da Apple, dobráveis modernos e smartphones. Ele fornece simulação com precisão de pixels de telas duplas desdobradas, telas de cobertura, dobradiça central e media queries CSS.
Como funciona este verificador de responsividade móvel?
Insira qualquer URL na barra de teste e a ferramenta exibirá o site ao vivo dentro de molduras de hardware precisas no seu navegador. Você pode inspecionar exibições em tela única ou dupla, alternar posturas livro e tenda, examinar a linha central de dobra e girar orientações sem instalar emuladores.
Por que sites responsivos tradicionais quebram no iPhone Duo?
A maioria dos sites supõe uma viewport contínua única. Quando desdobrado, o iPhone Duo abrange duas telas separadas por uma dobradiça física de 16px. Sem CSS específico para telas duplas (como @media (horizontal-viewport-segments: 2)), barras de pesquisa, modais e imagens podem ser cortados ao meio.
Posso testar servidores de desenvolvimento local como localhost?
Sim! Como o testador roda totalmente no lado do cliente em seu navegador, você pode inserir URLs locais como http://localhost:3000 ou http://localhost:4321 para testar antes de publicar.
O que fazer se um site exibir conexão recusada ou tela em branco?
Alguns sites de produção enviam cabeçalhos HTTP rígidos como X-Frame-Options: DENY. Nesses casos, clique no botão 'Abrir em Nova Aba' ou teste através de um servidor de desenvolvimento ou proxy.