Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Testar janelas de visualização responsivas e específicas de dispositivo

O Device Mode atualizado (desde o Chrome 49) é uma parte integrante do novo DevTools que prioriza a mobilidade e estende a barra principal do DevTools. Saiba como usar os controles para simular uma grande variedade de dispositivos ou de modo 100% responsivo.

TL;DR

  • Teste a responsividade do seu site usando o emulador de tela do Device Mode.
  • Salve predefinições personalizadas para acessá-las facilmente depois.
  • O Device Mode não substitui os testes com dispositivos reais. Esteja ciente das limitações do recurso.

Usar os controles da janela de visualização

device mode ativado

Com os controles da janela de visualização, você pode testar seu site em diversos dispositivos e de modo totalmente responsivo. Há dois modos:

  1. Responsivo. Torna a janela de visualização dimensionável com alças grandes em ambos os lados.
  2. Dispositivo específico. Bloqueia a janela de visualização no tamanho exato da janela de visualização de um dispositivo específico e emula determinadas características do dispositivo.

Modo responsivo

Recomendamos usar o Modo responsivo como padrão. Use-o durante o desenvolvimento ativo do seu site e aplicativo. Redimensione a janela de visualização com frequência para criar um design totalmente responsivo que se adapte até mesmo a tipos de dispositivos desconhecidos e futuros.

Para aproveitar ao máximo o Modo responsivo, ative a barra de consultas de mídia.

Personalizar o tamanho da janela de visualização

Arraste as grandes alças de redimensionamento da janela de visualização ou clique nos valores na barra de menu para ter um controle mais preciso.

Modo específico de dispositivo

Use o Modo específico de dispositivo quando estiver terminando o desenvolvimento ativo e quiser aperfeiçoar a aparência do seu site em dispositivos móveis específicos (por exemplo, um determinado iPhone ou Nexus).

Predefinições de dispositivo integradas

Incluímos os dispositivos mais populares atualmente no menu suspenso de dispositivo. Depois de selecionar um dispositivo, cada predefinição configura a emulação de determinadas características do dispositivo automaticamente:

  • Define a string "User Agent" (UA) correta.
  • Define a resolução e o DPI (taxa de pixels) do dispositivo.
  • Emula eventos de toque (se aplicável).
  • Emula sobreposições à barra de rolagem e meta viewport.
  • Dimensiona (aprimora) automaticamente o texto de páginas sem uma janela de visualização definida.
selecione um dispositivo

Adicionar predefinições de dispositivo personalizadas

O Device Mode oferece uma grande variedade de dispositivos para emulação. Você pode adicionar um dispositivo personalizado caso encontre um dispositivo de nicho ou extremo que não seja coberto.

Para adicionar um dispositivo personalizado:

  1. Acesse Settings no DevTools.
  2. Clique na guia Devices.
  3. Clique em Add custom device.
  4. Insira o nome, comprimento, altura, DPI e a string user agent do dispositivo.
  5. Clique em Add.

Seu dispositivo personalizado agora está disponível no menu suspenso Device.

selecione um dispositivo

Estados e orientação do dispositivo

alternar orientação

Ao emular um dispositivo específico, a barra de ferramentas do Device Mode exibe um controle adicional que serve principalmente como forma de alternar a orientação entre paisagem e retrato.

Em alguns dispositivos, o controle faz mais do que apenas mudança de orientação. Para dispositivos compatíveis, como o Nexus 5X, você terá um menu suspenso que permite emular determinados estados do dispositivo, como:

  • IU padrão de navegador
  • Com a barra de navegação do Chrome
  • Com teclado aberto
Alterar a IU do dispositivo

Zoom to fit

Às vezes, você precisará testar um dispositivo que tem resolução maior do que o espaço disponível na janela do navegador. Nesses casos, a opção Zoom to Fit é muito útil:

  1. Fit to Window definirá o nível de aproximação automaticamente de acordo com o espaço máximo disponível.
  2. Explicit percentages é um recurso útil caso você queira testar o DPI em imagens, por exemplo.
Zoom to Fit

Controles opcionais (por exemplo tocar, consultas de mídia, DPR)

Os controles opcionais podem ser alterados ou ativados clicando nos três pontos pequenos à direita da barra de ferramentas do dispositivo. As opções atuais incluem

  • Tipo de user agent (emula eventos de UA e toque)
  • Proporção de pixels do dispositivo
  • Consultas de mídia
  • Réguas
  • Configurar rede (UA, limitação de rede)
Configurações do Device Mode

Continue lendo para saber mais sobre as opções específicas.

Tipo de user agent

A configuração User Agent Type ou Tipo do dispositivo, permite alterar o tipo do dispositivo. Os valores possíveis são:

  1. Mobile
  2. Desktop
  3. Desktop with touch

Alterar essa configuração influenciará na emulação do evento de toque e da janela de visualização do dispositivo móvel, além de alterar a string UA. Assim, se quiser criar um site responsivo para computador e quiser testar os efeitos de passar o cursor, altere para "Desktop" no Modo responsivo.

Dica: Você também pode definir o user agent na gaveta Network conditions .

Proporção de pixels do dispositivo (DPR)

Se quiser emular um dispositivo com Retina em uma máquina sem Retina ou vice-versa, ajuste a opção Device pixel ratio. A proporção de pixels do dispositivo (DPR, na sigla em inglês) é a relação entre pixels lógicos e físicos. Os dispositivos com telas Retina, como o Nexus 6P, têm maior densidade de pixels que os dispositivos padrão, o que pode afetar a nitidez e o tamanho do conteúdo visual.

Alguns exemplos de sensibilidade à "proporção de pixels do dispositivo" (DPR) na Web são:

  • Consultas de mídia CSS como:

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }

  • Regras CSS image-set .

  • O atributo srcset em imagens.

  • A property window.devicePixelRatio.

Se tiver uma tela Retina nativa, você perceberá que recursos com poucos "pontos por polegada" (DPI) parecem pixelados enquanto ativos com mais DPI são nítidos. Para simular este efeito em uma tela comum, defina o DPR como 2 e dimensione a janela de visualização ajustando o zoom. Um recurso 2x continuará nítido, enquanto um 1x parecerá pixelado.

Consultas de mídia

Consultas de mídia são uma parte essencial do design para Web responsivo. Para visualizar o inspetor de consultas de mídia, clique em Show Media queries no menu de três pontos. O DevTools detecta consultas de mídia na sua folha de estilo e exibe-as como barras coloridas na régua superior.

mostrar consultas de mídia

inspetor de consultas de mídia

As consultas de mídia têm o seguinte código de cores:

Consultas segmentando uma largura máxima.
Consultas segmentando larguras dentro de um intervalo.
Consultas segmentando uma largura mínima.

Visualizar uma consulta de mídia rapidamente

Clique em uma barra de consulta de mídia para ajustar o tamanho da janela de visualização e os estilos de visualização para os tamanhos de tela de destino.

Visualizar o CSS associado

Clique com o botão direito em uma barra para visualizar onde a consulta de mídia está definida no CSS e ir diretamente para a definição no código-fonte.

Visualização de consultas de mídia no Web Fundamentals

Réguas

Ative a opção Rulers para mostrar réguas de pixels ao lado da janela de visualização.

Configurar rede (UA, limitação de rede)

Selecionar essa opção abre a Gaveta de condições da rede, onde você pode alterar os seguintes comportamentos de rede:

  1. Disk Cache: Desativar o Disk Cache impede que as páginas e seus recursos sejam armazenados em cache pelo navegador enquanto o DevTools está aberto.
  2. Network Throttling: Simula conexões de rede lentas.
  3. User agent: Permite definir a modificação de uma string UA (User Agent) específica.

Limitações

O Device Mode tem algumas limitações.

  • Hardware do dispositivo
    • O comportamento de CPU e GPU não são emulados.
  • IU do navegador
    • Telas do sistema, como a barra de endereço, não são emuladas.
    • Telas nativas, como elementos <select>, não são emuladas como uma lista modal.
    • Algumas melhorias, como a entrada de números para abrir um teclado, podem variar do comportamento real do dispositivo.
  • Funcionalidade do navegador
    • O WebGL opera no emulador, mas não é compatível com dispositivos iOS 7.
    • MathML não é compatível com o Chrome, mas é compatível com dispositivos iOS 7.
    • Não há suporte para a reprodução HLS (HTTP Live Streaming para vídeo) durante a emulação, mas ela é compatível de forma nativa no Chrome do Android e no iOS.
    • O bug de zoom na orientação do iOS 5 não é emulado.
    • A property CSS line-height opera no emulador, mas não é compatível com o Opera Mini.
    • Os limites de regra do CSS, como os do Internet Explorer, não são emulados.
  • AppCache

Apesar dessas limitações, o Device Mode é robusto o suficiente para a maioria das tarefas. Quando precisar testar em um dispositivo real, você pode usar a Depuração remota para obter informações adicionais.

Feedback

Was this page helpful?