Emular dispositivos móveis (Emulação do dispositivo)
Utilize a ferramenta Deulação de Dispositivos , por vezes denominada Modo de Dispositivo, para se aproximar do aspeto e comportamento da sua página num dispositivo móvel.
A Emulação do Dispositivo é uma aproximação de primeira ordem do aspeto e funcionalidade da sua página num dispositivo móvel. A Emulação do Dispositivo não executa o código num dispositivo móvel. Em vez disso, simula a experiência do utilizador móvel a partir do seu portátil ou ambiente de trabalho.
Alguns aspetos dos dispositivos móveis não são emulados nas DevTools. Por exemplo, a arquitetura das CPUs móveis é diferente da arquitetura das CPUs de computador ou portátil. Para os testes mais robustos, execute a sua página num dispositivo móvel.
Utilize a Depuração Remota para interagir com o código de uma página do seu computador enquanto a sua página é executada num dispositivo móvel. Pode ver, alterar, depurar, perfil ou os quatro enquanto interage com o código. O seu computador pode ser um bloco de notas ou computador de secretária.
Conteúdo detalhado:
- Simular uma janela viewport móvel
- Limitar a rede e a CPU
- Emular sensores
- Definir a cadeia de agente do utilizador
- Definir sugestões de cliente do agente de utilizador
Simular uma janela viewport móvel
Para abrir a IU que lhe permite simular uma viewport móvel:
Abra o DevTools. Por exemplo, clique com o botão direito do rato numa página Web e, em seguida, selecione Inspecionar.
Na Barra de Atividade, clique no botão Ativar/Desativar emulação do dispositivo (
). Em alternativa, em DevTools, selecione Personalizar e controlar DevTools (...) >Emulação do Dispositivo:
A página Web é composta no painel Emulação do Dispositivo. A Barra de Ferramentas do Dispositivo é aberta no Modo Viewport Reativo.
Modo Viewport Reativo
Para testar rapidamente o aspeto e funcionalidade da sua página em vários tamanhos de ecrã, arraste as alças para redimensionar a janela viewport para as dimensões necessárias. Pode introduzir quaisquer valores numéricos nas caixas de largura e altura. Se selecionar um tamanho maior do que o disponível na janela do browser, a janela viewport será dimensionada automaticamente para acomodar a viewport maior.
No exemplo seguinte, a largura da janela viewport está definida como 400 e a altura está definida como 736:
Se precisar de mais espaço no ecrã, pode alterar o local onde o DevTools está ancorado na janela do browser. Consulte Alterar o posicionamento de DevTools (Desancorar, Ancorar para baixo, Ancorar para a esquerda).
Mostrar consultas de multimédia
Se tiver definido consultas multimédia na sua página, avance para as dimensões viewport onde essas consultas de multimédia entram em vigor ao mostrar pontos de interrupção de consulta multimédia acima da sua janela viewport. Selecione Mais opções (
) >Mostrar consultas multimédia.
Uma consulta de multimédia CSS define um ponto de interrupção, que é uma largura de viewport do browser. Uma página Web pode definir um esquema reativo para cada ponto de interrupção (largura da janela viewport) definido pelo CSS da página Web.
As consultas de multimédia podem ser utilizadas para alterar o esquema de uma página quando a janela viewport do dispositivo em que a página Web é visualizada for superior ou inferior a uma determinada largura. As consultas de multimédia permitem-lhe escrever código para utilizar no esquema de página quando a largura do ecrã está abaixo de um determinado tamanho, ou num tamanho mínimo e máximo.
Para mostrar pontos de interrupção de consulta multimédia acima da janela viewport:
Clique no botão Mais opções (
) e, em seguida, selecione Mostrar consultas multimédia:
Se
max-widthosmin-widthpontos de interrupção forem definidos pela página Web, o DevTools apresenta barras adicionais acima da janela viewport:- A barra azul corresponde a
max-widthconsultas multimédia. - A barra verde corresponde a consultas multimédia que utilizam e
min-widthmax-width. - A barra laranja corresponde a
min-widthconsultas multimédia.
- A barra azul corresponde a
Para alterar a largura da janela viewport para que a consulta multimédia desse ponto de interrupção seja utilizada, clique num retângulo de ponto de interrupção na barra de pontos de interrupção. A largura da janela viewport é alterada para que o ponto de interrupção seja acionado e o esquema da página Web seja atualizado.
Para aceder à declaração correspondente
@mediano código da página Web, clique com o botão direito do rato entre barras verticais de ponto de interrupção e, em seguida, selecione Revelar no código fonte. O DevTools abre a ferramenta Origens e apresenta a linha correspondente@mediano Editor.
Consulte também:
- Depurar consultas de multimédia em Introdução à visualização e alteração do CSS.
Definir a proporção de píxeis do dispositivo
A proporção de píxeis do dispositivo (DPR) é a proporção entre píxeis físicos no ecrã de hardware e píxeis lógicos (CSS). Por outras palavras, a DPR diz ao browser quantos píxeis de ecrã utilizar para desenhar um píxel CSS. O Microsoft Edge utiliza o valor de DPR ao desenhar em ecrãs HiDPI (Pontos Altos Por Polegada).
Para definir uma proporção de píxeis do dispositivo:
Selecione Mais opções (
) >Adicionar proporção de píxeis do dispositivo:
É adicionada uma lista pendente de DPR na parte superior da janela viewport.
Na lista pendente DPR , selecione um valor DPR (1, 2 ou 3). O valor predefinido é 2.
Para remover a proporção de píxeis do dispositivo:
- Selecione Mais opções () >Remova a proporção de píxeis do dispositivo.
Definir o tipo de dispositivo
Para simular um dispositivo móvel ou de ambiente de trabalho, utilize a lista Tipo de Dispositivo :
Se a lista Tipo de Dispositivo não for apresentada, selecione Mais opções>Adicionar tipo de dispositivo.
A lista Tipo de Dispositivo contém os seguintes tipos de dispositivo:
| Tipo de dispositivo | Método de composição | Ícone do cursor | Eventos acionados |
|---|---|---|---|
| Dispositivos móveis | Dispositivos móveis | Circle | touch |
| Móvel (sem toque) | Dispositivos móveis | Normal | click |
| Desktop | Desktop | Normal | click |
| Ambiente de trabalho (toque) | Desktop | Circle | touch |
Chave para colunas na tabela acima:
| Coluna | Descrição |
|---|---|
| Método de composição | Se o Microsoft Edge compõe a página como um viewport móvel ou de ambiente de trabalho. |
| Ícone do cursor | Que tipo de cursor é apresentado quando paira o cursor sobre a página. |
| Eventos acionados | Se a página aciona touch ou click eventos quando interage com a página. |
Modo Viewport do Dispositivo Móvel
Para simular as dimensões de um dispositivo móvel específico, selecione o dispositivo na lista Dispositivos :
Rodar a janela viewport para a orientação horizontal
Teste a sua página Web na orientação horizontal.
Para rodar a janela viewport para a orientação horizontal, selecione Rodar (
):
O botão Rodar desaparece se a Barra de Ferramentas do Dispositivo for estreita.
Consulte também Definir orientação, abaixo.
Mostrar fotograma do dispositivo
Para simular as dimensões de um dispositivo móvel específico, clique em Mais opções ( e, em seguida, selecione Mostrar frame do dispositivo para mostrar a moldura do dispositivo físico à volta da janela viewport:
Se uma moldura de dispositivo não for apresentada para um dispositivo específico, significa que o DevTools não tem arte para esse dispositivo.
A moldura do dispositivo para o iPhone 7/6/8:
Adicionar um dispositivo móvel personalizado
Se a opção de dispositivo móvel de que precisa não estiver incluída na lista predefinida, pode adicionar um dispositivo personalizado.
Para adicionar um dispositivo personalizado:
Em DevTools, clique no botão Ativar/desativar emulação do dispositivo (
") para ativar a emulação do dispositivo.Na lista pendente do dispositivo à esquerda, selecione o menuItem Editar :
Selecione a Lista de dispositivos>Editar:
A página DevTools Settings Devices> (Emulated Devices) é aberta.
Clique no botão Adicionar dispositivo personalizado . A página Dispositivos Emulados nas definições adiciona uma secção Dispositivo na parte superior:
A proporção de píxeis do dispositivo, a cadeia do agente do utilizador e os campos de tipo de dispositivo são opcionais. O tipo de dispositivo é predefinido para Mobile:
Na secção Dispositivo , nas caixas de texto, introduza um nome de dispositivo, largura do ecrã e altura do ecrã para o dispositivo personalizado.
Opcionalmente, preencha os seguintes campos:
Proporção de píxeis do dispositivo. Veja Definir a proporção de píxeis do dispositivo, acima; e Janela: propriedade devicePixelRatio, na MDN.
Cadeia de agente de utilizador. Veja Definir a cadeia de agente de utilizador, abaixo; e Agente de utilizador, na MDN.
Tipo de agente de utilizador (tipo de dispositivo). Consulte Definir o tipo de dispositivo acima. A predefinição é Mobile.
Clique no botão Adicionar . O novo dispositivo está agora disponível na lista pendente do dispositivo no canto superior esquerdo do emulador do dispositivo.
Para remover um dispositivo personalizado:
- Em DevTools Settings>Devices> (Emulated Devices), paire o cursor sobre o nome do dispositivo personalizado e, em seguida, clique no ícone de caixote do lixo.
Mostrar réguas
Se precisar de medir as dimensões do ecrã, pode utilizar réguas para medir o tamanho do ecrã em píxeis.
Para apresentar as réguas acima e à esquerda da janela viewport:
Selecione Mais opções (
) >Mostrar réguas:
As réguas aparecem acima e à esquerda da janela viewport, indicando dimensões em píxeis:
Ampliar a janela viewport
Para testar o aspeto e funcionalidade da sua página em vários níveis de zoom, utilize a lista zoom para ampliar ou reduzir.
Capturar uma captura de ecrã
Para capturar uma captura de ecrã do que vê atualmente na janela viewport, clique em Mais opções () >Captura de ecrã:
Para capturar uma captura de ecrã de toda a página, incluindo o conteúdo que não está atualmente visível na janela viewport, selecione Capturar uma captura de ecrã de tamanho completo no mesmo menu.
Limitar a rede e a CPU
Os dispositivos móveis têm frequentemente restrições de rede e CPU.
Para testar a rapidez com que a sua página é carregada e como responde a diferentes velocidades da Internet e da CPU:
Na lista Limitação , altere a predefinição para Dispositivo móvel de camada média ou Móvel de baixa gama:
Se a lista Limitação estiver oculta, alargue a Barra de Ferramentas do Dispositivo.
A camada média móvel simula
fast 3Ge limita a CPU. É quatro vezes mais lento do que o normal.O dispositivo móvel de baixa extremidade simula
slow 3Ge limita a CPU. É seis vezes mais lento do que o normal.
Toda a limitação baseia-se na capacidade normal do seu portátil ou ambiente de trabalho.
Limitar apenas a CPU
Para limitar apenas a CPU e não a rede:
Em DevTools, selecione a ferramenta Desempenho .
Clique no botão Definições de captura (
) no canto superior direito.Na lista pendente CPU , selecione abrandamento 4x ou 6x de abrandamento:
Limitar apenas a rede
Para limitar apenas a rede e não a CPU:
Selecione a ferramenta Rede e, em seguida, selecione Online>Fast 3G ou Slow 3G.
Em alternativa, prima Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS) para abrir o Menu de Comandos, comece a
3gescrever e, em seguida, selecione Ativar limitação rápida de 3G ou Ativar limitação 3G lenta.
Também pode definir a limitação de rede a partir da ferramenta Desempenho :
Selecione Definições de Captura (
) e selecione a lista Rede e altere a predefinição para Fast 3G ou Slow 3G.
Emular sensores
Utilize o separador Sensores para substituir a geolocalização, simular a orientação do dispositivo, forçar o toque e emular o estado inativo.
As secções abaixo fornecem uma vista rápida sobre como substituir a geolocalização e definir a orientação do dispositivo.
Substituir geolocalização
Utilize a ferramenta Sensores para substituir a geolocalização e simular a orientação do dispositivo.
Substituir geolocalização
Se a sua página depender das informações de geolocalização de um dispositivo móvel para compor corretamente, forneça geolocalizações diferentes com a IU de geolocalização substituída.
Na Barra de Atividade, clique no botão Mais ferramentas (
) e, em seguida, clique em Sensores:
Em alternativa, abra o Menu de Comandos ao selecionar Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS). Escreva
Sensorse, em seguida, selecione Mostrar Sensores:
Selecione o menu pendente Localização e, em seguida, selecione uma das localizações predefinidas:
Para introduzir uma localização personalizada, selecione Outro e introduza as coordenadas da sua localização personalizada.
Para testar o comportamento da sua página quando as informações de localização estão indisponíveis, selecione Localização indisponível.
Consulte também:
Definir orientação
Se a sua página depender das informações de orientação de um dispositivo móvel para compor corretamente, abra a IU de orientação.
Para definir a orientação do dispositivo:
Na Barra de Atividade, clique no botão Mais ferramentas (
) e, em seguida, clique em Sensores:
Em alternativa, abra o Menu de Comandos premindo Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS). Escreva
Sensorse, em seguida, selecione Mostrar Sensores:
No menu pendente Orientação , selecione uma orientação predefinida.
Em alternativa, para introduzir a sua própria orientação, selecione Orientação personalizada e introduza os seus próprios valores alfa, beta e gama :
Consulte também:
Definir a cadeia de agente do utilizador
Se a sua página depender da cadeia de agente de utilizador de um dispositivo móvel para compor corretamente, utilize a ferramenta Condições de rede para especificar uma cadeia de agente de utilizador diferente.
Para definir a cadeia do agente de utilizador:
Selecione Mais ferramentas (+) >Condições de rede:
Em alternativa, abra o Menu de Comandos premindo Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS). Escreva
Network conditionse selecione Mostrar Condições de rede:
Na secção Agente de utilizador da ferramenta Condições de rede , desmarque a caixa de verificação Utilizar o browser predefinido .
Para selecionar a partir de uma lista de cadeias de agente de utilizador predefinidas, clique no menu que inicialmente lê Personalizar.
Em alternativa, para introduzir a sua própria cadeia de agente de utilizador, introduza a cadeia na caixa de texto Introduzir um agente de utilizador personalizado :
Consulte também:
Definir sugestões de cliente do agente de utilizador
Se o seu site utilizar sugestões de cliente de agente de utilizador, utilize a ferramenta Dispositivos Emulados para adicionar dispositivos e definir sugestões de cliente do agente de utilizador:
Clique com o botão direito do rato numa página Web e, em seguida, selecione Inspecionar.
Selecione Definições>Dispositivos. É aberta a página Emulated Devices (Dispositivos Emulados ) de Settings (Definições ).
Clique no botão Adicionar dispositivo personalizado e, em seguida, expanda sugestões de cliente do agente de utilizador:
Escreva um nome exclusivo na caixa de texto Nome do Dispositivo , como
Test101.Aceite os valores predefinidos ou altere a proporção depixéis Largura, Altura e Dispositivo, conforme necessário.
Defina sugestões de cliente do agente de utilizador da seguinte forma:
- Marca e Versão, como o Edge e o 92. Selecione + Adicionar Marca para adicionar vários pares de marcas e versões.
- Versão Completa do Browser , como 92.0.1111.0.
- Plataforma e Versão , como Windows e 10.0.
- Arquitetura como x86.
- Modelo de dispositivo como Galaxy Nexus.
Pode definir ou alterar qualquer uma das sugestões de cliente do agente de utilizador. Não existem valores necessários.
Clique em Adicionar. O novo dispositivo é apresentado no estado selecionado na parte superior da lista Dispositivos Emulados .
Também pode definir sugestões de cliente de agente de utilizador na ferramenta Rede ; veja Referência de funcionalidades de rede.
Observação
Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é da autoria de Kayce Bascos.
Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.