Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

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 seus controles para simular uma grande variedade de dispositivos ou expandir totalmente a capacidade de resposta.

TL;DR

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

Usar os controles da janela de visualização

Device Mode ativado

Os controles da janela de visualização permitem que você teste seu site em diversos dispositivos e com total capacidade de resposta. Há dois modos:

  1. Responsivo. Torna a janela de visualização livremente dimensionável com alças grandes em ambos os lados.
  2. Específico do dispositivo. 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 modo de trabalho padrão. Use-o durante o desenvolvimento ativo do seu site e aplicativo e redimensione a janela de visualização com frequência para criar um design totalmente responsivo que se adapte a até mesmo 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 se aproximar do fim do desenvolvimento ativo e quiser aperfeiçoar a aparência do seu site em celulares específicos (por exemplo, um celular iPhone ou Nexus específico).

Predefinições de dispositivo incorporadas

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 um caso 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 são úteis caso você queira testar o DPI em imagens, por exemplo.
Zoom to Fit

Controles opcionais (por exemplo, toque, 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 opção User Agent Type, ou tipo de dispositivo, permite alterar o tipo de 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 device pixel ratio (DPR) é 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 propriedade window.devicePixelRatio.

Se tiver uma tela Retina nativa, você perceberá que ativos 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 ativo 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 visando uma largura máxima.
Consultas visando larguras dentro de um intervalo.
Consultas visando 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 a opção Configure network abrirá um painel na gaveta que permitirá que você altere comportamentos relacionados à rede:

  1. Disk Cache: Desativar Disk Cache impede que as páginas e seus ativos sejam armazenados em cache pelo navegador enquanto o DevTools está aberto.
  2. Network Throttling: Leia mais sobre Limitação de rede aqui.
  3. User Agent: Permite definir a modificação de uma string UA (User Agent) específica.

Dica: Você também pode abrir a gaveta Network conditions no menu principal.

Limitações

O Device Mode tem algumas limitações.

  • Componentes do dispositivo
  • O comportamento do CPU e do 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 é com dispositivos iOS 7.
  • O erro de zoom na orientação do iOS 5 não é emulado.
  • A propriedade 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
  • O emulador não modifica o UA para arquivos de manifesto ou solicitações de origem da vista do 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.