Simuladores de dispositivos (móveis e desktop/de mesa) para páginas da internet

Introdução

Quem trabalha com web (design, desenvolvimento, programação) precisa saber como seua página vai aparecer em diversas situações ao entregar seu trabalho para o cliente de internet.

Por isso, antes de tudo lembre-se: existem simuladores de dispositivos (celular, tablet, laptop ou micro de mesa) e testadores de páginas da web.

Os simuladores tentam mostrar a responsividade de sua página web (ou a falta dela) em diversos dispositivos móveis;
os testadores exibem a performance/desempenho de sua página, do ponto de vista da qualidade do código ou da rapidez de carregamento, na internet.

Vou falar aqui do primeiro caso – os simuladores de dispositivos.

Imagem: Freepik.com

Prós e contras
Tenha em mente que os simuladores tem graus de fidelidade ao tentar exibir sua página web em diversos dispositivos.

Assim sendo, o simulador pode ser o equivalente a você estreitar a largura da tela de seu navegador web em micro de mesa ou realmente exibir a sua página como se fosse o dispositivo.

Em alguns casos parte do conteúdo de sua página pode não aparecer por conta do código da página em conflito com o simulador (certas páginas não exibem conteúdos em frames de HTML, e seu simulador pode ser um frame de HTML).

Por isso teste sua página em mais de um simulador para ter um parecer definitivo, sempre tendo em conta que nada substitui ver a página no dispositivo desejado (celular ou tablet, p.ex.).

Onde testar
Seguem 3 links, dentro destes cenários descritos aqui:

Mobile test me: é um simulador que se propõe a exibir páginas web em dispositivos pré-definidos, mas possui qualidade 6 e grau de fidelidade 6 (numa escala de 0 a 10). Algumas opções como exibir páginas responsivas só para membros cadastrados.

Coderama: como o anterior, exibe páginas web mas em diversos tamanhos de telas padrão do mercado, em pé ou deitadas. Qualidade 8 e grau de fidelidade, 6.

Direto no navegador: muitos navegadores desktop/de mesa hoje fornecem opção de visualizar páginas web simulando diversas telas (e até dispositivos) do mercado.
O Google Chrome, Firefox e até o precursor nessa área, o Opera, tem esses recursos.
Você pode pesquisar diversos tutoriais completos na web para cada navegador, aqui vou citar caminhos rápidos:

OBSERVAÇÃO IMPORTANTE:
você pode usar essas dicas para navegar no Instagram, usando computador de mesa como se estivesse no celular.

No Google Chrome, para ter o rodapé com a barra de navegação do instagram, na sua tela desktop/de mesa, basta você estar logado no seu perfil.

No Firefox, os plugins Web for Instagram exibem o rodapé do Instagram com a barra de navegação.

  • No Firefox: aperte Ctrl + Shift + M (Mac: Cmd + Opt + M)
    que a página aberta vai aparecer adaptada e com um menu de ajustes (lembre-se que a versão do seu navegador e S.O. – Windows ou Mac vão exibir opções ligeiramente diferentes).
    Permite salvar captura de tela facilmente. Qualidade: 8, Grau de fidelidade: 9
  • No Google Chrome:
    – Aperte as teclas Ctrl + Shift + i
    – Procure no painel que se abre o botão ao lado da lupa (celular grande e pequeno) para trocar a barra de ferramentas de dispositivos.

    Para navegar no Instagram: aperte a tecla F5

    Como no Firefox, você configura ali como exibir a simulação de seu dispositivo.
    Detalhe: há muitas configurações pré-definidas (customizadas) que estão ocultas.
    Qualidade: 8 e Grau de fidelidade: 8

Boa sorte!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

%d blogueiros gostam disto: