Emulação de dispositivo

Na guia DevTools do Edge: Navegador , a barra de ferramentas Emulação de Dispositivo na parte inferior permite simular diferentes ambientes:

Visualização do navegador na extensão com a barra de ferramentas de emulação mostrando

Para reproduzir a interface do usuário mostrada aqui, confira Abrir DevTools clicando com o botão direito do mouse em um arquivo HTML em Abrir DevTools e no navegador DevTools.

Menu suspenso Emular Dispositivos

No menu suspenso Emular dispositivos , você pode selecionar entre vários dispositivos diferentes ou a opção padrão de Responsivo. Quando você seleciona um dispositivo, o modo de exibição redimensiona para as medidas corretas e simula a interface de toque. Por exemplo, há vários layouts de iPhone emulados:

Visualização do navegador na extensão mostrando o produto Web em um layout de telefone emulado

Menus suspensos de largura e altura

Para alterar as dimensões do modo de exibição, clique nos menus suspenso Largura e Largura de Altura e Altura:

Menus suspensos de largura e altura

Botão Girar

Clique no botão Girar (botão Girar) para girar o modo de exibição entre a orientação de retrato e paisagem:

Viewport girado para orientação paisagística

Botão Emular Recursos de Mídia do CSS

Use o botão Emular recursos de mídia CSS (Emular recursos de mídia CSS) para:

  • Emular consultas de mídia CSS.
  • Teste a aparência do produto no modo de impressão.
  • Alternar entre o modo escuro e claro.
  • Emular cores forçadas.

Visualização do navegador na extensão mostrando o produto Web no modo de cor forçado

Botão Emular Deficiências de Visão

Clique no botão Emular deficiências de visão (botão Emular deficiências de visão) para testar a experiência do usuário da página da Web atual com deficiências visuais diferentes. Este botão permite testar seu produto em um modo desfocado ou em diferentes deficiências de cor:

Visualização do navegador na extensão mostrando o produto Web em uma emulação desfocada

Confira também